所以这就是我想要做的。 我正试图从头开始创建一个简单的响应式旋转木马我到目前为止唯一有问题的部分是检测旋转木马中的最后一项并重新开始它所以它看起来无限。什么是最好的方法？
此外，我试图在移动设备上实现这一点，你可以在旋转木马上拖动以查看更多项目，这部分并不是什么大不了但我和桌面版本有同样的问题我只是我想找到一种让它无限的方法。
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));
}
JQUERY：
var scrolled = 0;
$(document).on('click', '.scroll-right', function() {
scrolled = scrolled + 250;
$('.nav-products-carousel').stop().animate({
scrollLeft: scrolled
});
});
答案 0 :(得分：1)
以下是JsFiddle
中的工作演示
$(document).ready(function(){
var scrolled = 0,
scrollDistance = 210, // Scrolling at at time
maxToScroll, // Maximum to scroll left
el; // Target element
// Get target element reference
el = $('.nav-products-carousel');
// calculate maximum to scroll
// this helps to make last element to appear correctly
maxToScroll = el.width() + scrollDistance;
$(document).on('click', function() {
if ( scrolled < maxToScroll ){
scrolled = scrolled + scrollDistance;
el.stop().animate({
scrollLeft: scrolled
});
}
else{
el.stop().animate({
scrollLeft: 0
});
// Reset scrolled flag
scrolled=0;
}
});
});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));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<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>