jquery - 使用 Bootstrap 3.3.+ 在 HTML/CSS(无插件)中滚动带有 1 个项目的水平多项目 slider

Question

检查这个例子http://www.bootply.com/94452

我需要在不使用插件的情况下制作类似的水平多项目 slider 。我想用 html css 和 js/jquery 制作它。

上面的 slider 在复制和尝试时效果不佳，它会滑动屏幕上的所有项目，然后最后只滚动一次。

我想逐一滑动项目。

在最后一项之后应该有第一项，换句话说，幻灯片应该是循环的。

包含图像和其他内容的项目。这是我试过的代码。

<style>
    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
    .carousel-inner .active.left { 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;}
</style>

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<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.6/js/bootstrap.min.js"></script>


<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>

<script>
    $(document).ready(function () {
        $('#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));
          }
        });
    });
</script>

任何人都可以修复这个或任何更好的代码。提前致谢

Answer 1

终于找到了我要找的东西。这是使用 bootstrap 3.3.x 的示例

http://codepen.io/MhSami/pen/zNBMbj

这是来源:

<style>

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

    @import url(https://fonts.googleapis.com/css?family=Lato:400,300,900,700);

    html {
      font-size: 16px;
    }

    h3 {
      font-family: 'Lato', sans-serif;
      font-size: 2.125rem;
      font-weight: 700;
      color: #444;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin: 55px 0 35px;
    }

    a {
      color: #ddd;
      text-transform: capitalize;
      font-size: 20px;
      &:hover {
        color: #ccc;
        text-decoration:none;
      }
    }

    .carousel-inner { margin: auto; width: 90%; }
    .carousel-control            { width:  4%; }
    .carousel-control.left,
    .carousel-control.right {
      background-image:none;
    }

    .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
      margin-top:-10px;
      margin-left: -10px;
      color: #444;
    }

    .carousel-inner {
      a {
        display:table-cell;
        height: 180px;
        width: 200px;
        vertical-align: middle;
      }
      img {
        max-height: 150px;
        margin: auto auto;
        max-width: 100%;
      }
    }

    @media (max-width: 767px) {
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
          left: 0;
          -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
          left: 0;
          -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
      }

    }
    @media (min-width: 767px) and (max-width: 992px ) {
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
          left: 0;
          -webkit-transform: translate3d(50%, 0, 0);
          transform: translate3d(50%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
          left: 0;
          -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
      }
    }
    @media (min-width: 992px ) {

      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
          left: 0;
          -webkit-transform: translate3d(16.7%, 0, 0);
          transform: translate3d(16.7%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
          left: 0;
          -webkit-transform: translate3d(-16.7%, 0, 0);
          transform: translate3d(-16.7%, 0, 0);
      }

    }


</style>


<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.6/js/bootstrap.min.js"></script>


<div class="col-md-12 text-center"><h3>Multiple Item Product Carousel Bootstrap 3.3.6<br><a href="#">Thanks to and Refrence @Maurice and Icons8</a></h3></div>
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/pineapple-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/paprika-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/avocado-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Food/banana-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/onion-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Food/asparagus-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/watermelon-96.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Food/eggplant-96.png" 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>


 <script>
     $(document).ready(function() {
        $('.carousel[data-type="multi"] .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<4;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
          }
        });


    });


 </script>

感谢@Ruby 指出问题。