标签: carousel

什么是一种简单(干净)的方式将Bootstrap 3的旋转木马指示器向下移动到滑动容器外面,这样它就不会叠加在照片上？请参阅下面的图片,了解我要移动指示器的位置.

链接到实时代码

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

</div><!--//container -->

我正在尝试为我的Android应用程序构建一个UI,其中包含一个可垂直滚动的可水平滚动轮播页面(类似于Netflix应用程序的功能).这种行为是如何完成的？

一个基本的实现就足以让我开始.UI还有一些其他要求,我将在此处作为参考,因为它可能会影响我可以使用的类或库.

1)旋转木马之间的垂直滚动应该是平滑的,但是当用户释放时,UI应该"捕捉"最近的旋转木马(因此用户总是在旋转木马行上,而不是在两个旋转木马之间).

2)旋转木马上的水平滚动应该是平滑的,但是当用户释放时,UI应该"捕捉"旋转木马中最近的项目.

3)应该可以在转盘中的项目上叠加附加信息

4)UI应适应任何屏幕尺寸.

5)应使用箭头键导航(适用于无触摸屏的设备)

6)应该适用于各种Android版本(可能通过支持库)

7)应该可以在根据GPL许可的开源应用程序中使用

可接受的答案不必满足所有这些要求.至少,一个好的答案应该涉及导航多个轮播(而不是只有一个轮播).

这是一个基本上我想象的模型(我很灵活,不必看起来像这样......只是为了澄清我在谈论的内容 - 每一行都包含很多可能的项目向左和向右滚动,整个页面可以上下滚动)

我显然在这里错过了一些愚蠢的东西.我有白色背景的图像,所以我希望能够编辑Bootstraps Carousel上的箭头,以便它们可见.如此多的改变箭头的颜色(不像我做的那样背景).

CSS

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}

轮播HTML

<div class = 'col-md-9'>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item">
                <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item"> …

我需要制作Bootstrap 3.0 Carousel以显示缩略图幻灯片.我怎样才能做到这一点？这是我正在寻找的图像:

这是Bootstrap 2的一个工作示例,但我需要这个用于Bootstrap 3.0:Bootstrap Thumbnail Slider

我在使用带有Angular2的HammerJS时遇到了问题.我有一个旋转木马(基于带有Angular2事件处理程序的bootstrap轮播),我正在听左侧滑动并向右滑动事件.滑动本身完美无缺.问题是,因为我使用HammerJS,我不能在我的轮播组件上向上/向下滚动,因为它是一个完整的视口大小的项目,这是一个很大的问题.

如何解决这个问题？

平台:
Angular2 2.1.2
三星Galaxy S2搭载Android 5.1.1
谷歌Chrome for Android:54.0.2840.85

我想使用bootstrap轮播和角度js来显示旋转木马内容中的图像.但是,当点击导航链接时,它会显示空白页面.

我的代码示例如下.(注意:此代码仅适用于Bootstrap 3.1.0,但不适用于AngularJS 1.2.13)

<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/c.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/b.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/a.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

我正在研究3D Carousel for android.

我正在使用此代码,以下是我当前的输出.

我想开发以下3D形状的旋转木马.

我提到了以下问题,这些问题已在SO中提出.

1. 如何修改3D轮播,修改图像的尺寸和角度

2. 如何在android中创建带轮播效果的列表

3. 如何增加轮播图像空间？

4. Coverflow Carousel效果与Android中的iPhone/iPad相同

以下是我的要求:

5. 使用3D Carousel项目创建SPB Carousel风格

从这个我回答我说:

mCamera.rotateY(-((CarouselItem) child).getCurrentAngle());

内部getChildStaticTransformation()方法,Carousel.java但我没有得到一个完美的结果.

请帮我解决一下.

使用bootstrap.js版本2.02

我试图让Twitter Bootstrap Carousel在有人访问我的网站时自动循环.现在,只有在您单击其中一个循环按钮至少一次后,自动循环才会起作用.

我希望旋转木马能够立即开始骑行.

有谁知道如何做到这一点？

我的网站是hotairraccoon.com

你会看到在你点击旋转木马一次后,它开始每隔5秒左右循环一次,但我不希望需要点击来显示轮播内容.

谢谢!

你能告诉我如何获得引导程序中旋转木马滑块的总数和当前数量,如下图所示吗？

我有一个标准的引导轮播和<div>与.num类显示的总电流的号码,我用这个代码检索数字,但它并没有去通过

$('.num').html(){
  $('#myCarousel').carousel({number})
}

谢谢

更新:

请在这个jsfiddle LINK上找到一个样本

我正在尝试使用jQuery向Bootstrap轮播添加幻灯片,但它并不是浏览器中的滑块.相反,它在列表视图中显示图像.

<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
    onload=function(){

        for(var m=3;m>=0;m--)
        {
            var path="file_uploads/"+m+".jpg";
            $(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=\""+m+"\"></li>");
            $(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");             
        }

        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
        $('.carousel').carousel();
    }
</script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
    <ol class="carousel-indicators">

    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">       

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</body> …