如何在滑块中显示六个产品？

Question

我正在使用bootsnipp.com和codepen.io 但在滑块中只显示一个项而不是6.如何在滑块中显示六个项目，单击下一个和上一个按钮显示下一个或上一个项目？ 这是代码：

$(document).ready(function() {
  $('#itemslider').carousel({
    interval: 3000
  });

  $('.carousel-showmanymoveone .item').each(function() {
    var itemToClone = $(this);

    for (var i = 1; i < 6; i++) {
      itemToClone = itemToClone.next();

      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-" + (i))
        .appendTo($(this));
    }
  });
});

#slider-text {
  padding-top: 40px;
  display: block;
}

#slider-text .col-md-6 {
  overflow: hidden;
}

#slider-text h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 3px;
  margin: 30px auto;
  padding-left: 40px;
}

#slider-text h2::after {
  border-top: 2px solid #c7c7c7;
  content: "";
  position: absolute;
  bottom: 35px;
  width: 100%;
}

#itemslider h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin: 10px auto 3px;
}

#itemslider h5 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  font-size: 12px;
  margin: 3px auto 2px;
}

#itemslider h6 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  ;
  font-size: 10px;
  margin: 2px auto 5px;
}

.badge {
  background: #b20c0c;
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  line-height: 31px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  border: 2px solid #FFF;
  box-shadow: 0 0 0 1px #b20c0c;
  top: 5px;
  right: 25%;
}

#slider-control img {
  padding-top: 60%;
  margin: 0 auto;
}

@media screen and (max-width: 992px) {
  #slider-control img {
    padding-top: 70px;
    margin: 0 auto;
  }
}

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}

.carousel-showmanymoveone .carousel-control.left {
  margin-left: 5px;
}

.carousel-showmanymoveone .carousel-control.right {
  margin-right: 5px;
}

.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3,
.carousel-showmanymoveone .cloneditem-4,
.carousel-showmanymoveone .cloneditem-5 {
  display: none;
}

@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner>.active.left,
  .carousel-showmanymoveone .carousel-inner>.prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner>.active.right,
  .carousel-showmanymoveone .carousel-inner>.next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner>.left,
  .carousel-showmanymoveone .carousel-inner>.prev.right,
  .carousel-showmanymoveone .carousel-inner>.active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}

@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner>.item.active.right,
  .carousel-showmanymoveone .carousel-inner>.item.next {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner>.item.active.left,
  .carousel-showmanymoveone .carousel-inner>.item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner>.item.left,
  .carousel-showmanymoveone .carousel-inner>.item.prev.right,
  .carousel-showmanymoveone .carousel-inner>.item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner>.active.left,
  .carousel-showmanymoveone .carousel-inner>.prev {
    left: -16.666%;
  }
  .carousel-showmanymoveone .carousel-inner>.active.right,
  .carousel-showmanymoveone .carousel-inner>.next {
    left: 16.666%;
  }
  .carousel-showmanymoveone .carousel-inner>.left,
  .carousel-showmanymoveone .carousel-inner>.prev.right,
  .carousel-showmanymoveone .carousel-inner>.active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3,
  .carousel-showmanymoveone .carousel-inner .cloneditem-4,
  .carousel-showmanymoveone .carousel-inner .cloneditem-5,
  .carousel-showmanymoveone .carousel-inner .cloneditem-6 {
    display: block;
  }
}

@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner>.item.active.right,
  .carousel-showmanymoveone .carousel-inner>.item.next {
    -webkit-transform: translate3d(16.666%, 0, 0);
    transform: translate3d(16.666%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner>.item.active.left,
  .carousel-showmanymoveone .carousel-inner>.item.prev {
    -webkit-transform: translate3d(-16.666%, 0, 0);
    transform: translate3d(-16.666%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner>.item.left,
  .carousel-showmanymoveone .carousel-inner>.item.prev.right,
  .carousel-showmanymoveone .carousel-inner>.item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href="index.css" />
<!--<script src='index.js'></script>-->

<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>


<!--Item slider text-->
<div class="container">
  <div class="row" id="slider-text">
    <div class="col-md-6">
      <h2>NEW COLLECTION</h2>
    </div>
  </div>
</div>

<!-- Item slider-->
<div class="container-fluid">

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="carousel carousel-showmanymoveone slide" id="itemslider">
        <div class="carousel-inner">

          <div class="item active">
            <div class="col-xs-12 col-sm-6 col-md-2">
              <a href="#"><img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" class="img-responsive center-block"></a>
              <h4 class="text-center">MAYORAL SUKNJA</h4>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>

          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-2">
              <a href="#"><img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" class="img-responsive center-block"></a>
              <h4 class="text-center">MAYORAL KOŠULJA</h4>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>

          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-2">
              <a href="#"><img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" class="img-responsive center-block"></a>
              <span class="badge">10%</span>
              <h4 class="text-center">PANTALONE TERI 2</h4>
              <h5 class="text-center">4000,00 RSD</h5>
              <h6 class="text-center">5000,00 RSD</h6>
            </div>
          </div>

          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-2">
              <a href="#"><img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" class="img-responsive center-block"></a>
              <h4 class="text-center">CVETNA HALJINA</h4>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>

          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-2">
              <a href="#"><img src="https://s12.postimg.org/e2zk9qp7h/item_5_180x200.png" class="img-responsive center-block"></a>
              <h4 class="text-center">MAJICA FOTO</h4>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>

          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-2">
              <a href="#"><img src="https://s12.postimg.org/46yha3jfh/item_6_180x200.png" class="img-responsive center-block"></a>
              <h4 class="text-center">MAJICA MAYORAL</h4>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>

        </div>

        <div id="slider-control">
          <a class="left carousel-control" href="#itemslider" data-slide="prev">
            <img src="https://s12.postimg.org/uj3ffq90d/arrow_left.png" alt="Left" class="img-responsive">
          </a>
          <a class="right carousel-control" href="#itemslider" data-slide="next">
            <img src="https://s12.postimg.org/djuh0gxst/arrow_right.png" alt="Right" class="img-responsive">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

如何在滑块中显示六种产品？当鼠标光标位于滑块上时，滑块产品也不应移动。

Answer 1

更改滑块容器的宽度并更改项目的宽度，假设滑块的容器宽度为100％，滑块元素的宽度为100％/ 6.停止移动只需添加：

$('slider').hover(function(){
    clearInterval(variableThatHoldsSetInterval);
},function(){
    variableThatHoldsSetInterva = setInterval(function(){},time);
})

Answer 2

＆＃13;

＆＃13;

jQuery('#client-carousel').carousel({interval: 5000, pause: "hover"});

＆＃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="our-clients">
  <div class="container">
    <div class="row">
      <div class="client">
        <div class="client-logo">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="clients-title">
              <h3 class="title">Our Clients</h3>
              
            </div>
            <div class="clearfix"></div>
            <div class="row">
              <div id="client-carousel" class="client-carousel carousel slide">
                <div class="carousel-inner">
                  <div class="item active">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item animate_afc d1">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/1.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item animate_afc d2">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/2.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item animate_afc d3">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/3.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item animate_afc d4">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/4.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item animate_afc d5">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/5.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item animate_afc d6">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/6.jpg"></a></div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/7.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/8.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/9.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item">
                      <div class="item-inner"><a href="#"><img alt="cablenet" src="img/clientslogo/10.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item">
                      <div class="item-inner"><a href="#"><img alt="Upportdash" src="img/clientslogo/11.jpg"></a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 item">
                      <div class="item-inner"><a href="#"><img alt="Upportdash" src="img/clientslogo/12.jpg"></a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
          </div>
        </div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

尝试这个代码我认为解决你的问题..任何修改评论我

Answer 3

上面的代码没有错误。实际上我们需要在结束body标签之前放置jquery文件因为每次jquery文件添加和删除类。因此，对于这种动态变化，我们必须将最终的身体标签放在头部之前。我们都知道头部中定义的所有内容都只包括一次。