gpt4 book ai didi

javascript - 带有元素数量的垂直 Bootstrap 轮播

转载 作者:行者123 更新时间:2023-11-28 04:08:25 24 4
gpt4 key购买 nike

我正在尝试根据 ShowManySlideOneCarousel 制作垂直轮播(我基于 Bootstrap 轮播)

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

最佳答案

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

关于javascript - 带有元素数量的垂直 Bootstrap 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42837417/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com