带有项目数量的垂直引导轮播

Posted 2023-03-07

【中文标题】带有项目数量的垂直引导轮播

【英文标题】：Vertical bootstrap carousel with number of items

【发布时间】：2017-08-07 19:47:15

【问题描述】：

我正在尝试基于ShowManySlideOneCarousel（我基于引导轮播）制作垂直轮播

我的html

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="carousel carousel-showmanymoveone slide vertical" id="carousel123">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/50/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/50/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/50/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>
          </div>          
          <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/50/002040/eeeeee&amp;text=4" class="img-responsive">
          </div>
        </div>
        <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

Js

(function()
  $('.carousel-showmanymoveone .item').each(function()
    var itemToClone = $(this);
    for (var i=1;i<4;i++) 
      itemToClone = itemToClone.next();
          if (!itemToClone.length) 
        itemToClone = $(this).siblings(':first');
      
          itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    
  );
());

问题是当我按下“下一个”按钮时，它会溢出下一张幻灯片，但是当我按下“上一个”按钮时，它不会显示任何过渡。

我不知道如何使它正常工作。有没有现成的解决方案？ 它将在商店的产品页面中显示产品图片。

Bootply example

【问题讨论】：

它似乎也对我有用，请使用您的浏览器control + r 或尝试使用其他浏览器。如果仍然存在任何错误，请在此处更好地指定。

@ErhanYaşar 下一张幻灯片的过渡效果不好，上一张幻灯片没有过渡，这是我想要改变的

好吧，您选择的轮播就是这样，我不必再添加更多内容了。您可以尝试任何其他轮播。

【参考方案1】：

我试过你的代码。它适用于下一张和上一张幻灯片。您是否尝试清除 Web 浏览器的缓存？尝试这样做！ https://kb.iu.edu/d/ahic

【讨论】：

下一张幻灯片的过渡效果不好，上一张幻灯片没有过渡，这是我想要改变的