bootstrap：多个图像轮播只显示一张幻灯片

时间：2017-08-31 03:36:21

标签： javascript css carousel

我使用两个滑块，问题出在第二个。它应该一次显示多个图像，然后一次滑动一个项目。但在这种情况下，它只显示在项目上。 我试图按照这个主题的所有步骤进行操作，但它仍然无法正常工作： Bootstrap: Slide only one image among the multiple images in an item of the carousel

＆＃13;
＆＃13; 
$('#myCarousel').carousel({
  interval: 4000
})

$('.carousel .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < 2; i++) {
    next = next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});
＆＃13; 
.carousel-inner .active.left {
  left: -25%;
}

.carousel-inner .active.right {
  left: 25%;
}

.carousel-inner .next {
  left: 25%;
}

.carousel-inner .prev {
  left: -25%;
}

.carousel-control {
  width: 4%;
}

.carousel-control.left,
.carousel-control.right {
  margin-left: 15px;
  background-image: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="col-sm-12 margin-top-20">
    <div id="largeCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#largeCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#largeCarousel" data-slide-to="1"></li>
        <li data-target="#largeCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner custom_carousel_holder">
        <div class="item active">
          <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" />
          <div class="carousel-caption">
            <h3>Los Angeles</h3>
            <p>LA is always so much fun!</p>
          </div>
        </div>
        <div class="item">
          <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" />
          <div class="carousel-caption">
            <h3>Chicago</h3>
            <p>Thank you, Chicago!</p>
          </div>
        </div>

        <div class="item">
          <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" />
          <div class="carousel-caption">
            <h3>New York</h3>
            <p>We love the Big Apple!</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#largeCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#largeCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <div class="col-sm-12 text-center margin-top-20">
    <h3>Discover Our Brands</h3>
  </div>

  <div class="col-md-12 text-center">
    <h3>Bootstrap 3 Multiple Slide Carousel</h3>
  </div>
  <div class="col-md-6 col-md-offset-3">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-3">
            <a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我已经检查了上面提供的链接上的样本并复制粘贴了它，它仍然无法正常工作。我不确定我是否会在两个滑块上造成冲突。

1 个答案:

答案 0 :(得分：0)

这是你的代码明智的解决方案所有正确的我认为你忘记在这里添加bootstrap js文件与cdn的工作小提琴

https://jsfiddle.net/hahkarthick/7n8aux8k/

＆＃13;
＆＃13; 
$('#myCarousel').carousel({
    interval: 4000
})

$('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

    next.children(':first-child').clone().appendTo($(this));
    }
});
＆＃13; 
.carousel-inner .active.left { left: -25%; }
.carousel-inner .active.right{ left:  25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev        { left: -25%; }
.carousel-control            { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
＆＃13; 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="container-fluid">
    <div class="col-sm-12 margin-top-20">
        <div id="largeCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#largeCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#largeCarousel" data-slide-to="1"></li>
                <li data-target="#largeCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner custom_carousel_holder">
                <div class="item active">
                    <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/>
                    <div class="carousel-caption">
                        <h3>Los Angeles</h3>
                        <p>LA is always so much fun!</p>
                    </div>
                </div>
                <div class="item">
                    <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/>
                    <div class="carousel-caption">
                        <h3>Chicago</h3>
                        <p>Thank you, Chicago!</p>
                    </div>
                </div>

                <div class="item">
                    <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/>
                    <div class="carousel-caption">
                        <h3>New York</h3>
                        <p>We love the Big Apple!</p>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#largeCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#largeCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="col-sm-12 text-center margin-top-20">
        <h3>Discover Our Brands</h3>
    </div>

    <div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
    <div class="col-md-6 col-md-offset-3">
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题