【发布时间】：2018-04-21 22:42:54
【问题描述】：
这就是我想要做的。 我正在尝试从头开始创建一个简单的响应式轮播，到目前为止，我唯一遇到的问题是检测轮播中的最后一项并重新开始，因此它看起来是无限的。最好的方法是什么？
我也在尝试在移动设备上实现这一点，您可以在轮播上拖动以查看更多项目，这部分没什么大不了的，但我遇到了与桌面版本相同的问题，我只是想找到一种方法让它变得无限。
HTML：
<div class="container">
<div class="nav-products-carousel">
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">1</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">2</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">3</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">4</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">5</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">6</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">8</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">9</p>
</a>
</div>
<span class="scroll-right text-white">
<i class="fa fa-angle-right fa-3x"></i>
</span>
</div>
</div>
CSS：
div.nav-products-carousel {
width: 100%;
white-space: nowrap;
overflow-x: hidden;
background: rgb(201, 201, 116);
}
div.nav-item {
display: inline-block;
width: 200px;
white-space: initial;
text-align: center;
padding: 5px;
}
.scroll-right {
right: 0px;
cursor: pointer;
position: absolute;
background: #ccc;
padding-top: 5%;
height: 100%;
width: 100px;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
查询：
var scrolled = 0;
$(document).on('click', '.scroll-right', function() {
scrolled = scrolled + 250;
$('.nav-products-carousel').stop().animate({
scrollLeft: scrolled
});
});
【问题讨论】：
-
请正确设置 JsFiddle。它缺少 jQuery 和 BootStrap。而且，它根本不起作用。
-
@AmitKB 很抱歉。我用 bootstrap 和 jquery 1.9 更新了 JsFiddle。现在似乎对我有用jsfiddle.net/17r2v6hs/6
-
答案已发布。 JsFiddle 需要通过“https”而不是“http”进行外部链接引用。
标签： jquery twitter-bootstrap css carousel infinite-scroll