使用 jQuery 创建一个简单的无限旋转木马

Question

这就是我正在尝试做的事情。我正在尝试从头开始创建一个简单的响应式轮播，到目前为止我遇到的唯一问题是检测轮播中的最后一项并重新启动它，因此它看起来是无限的。最好的方法是什么？

此外，我正在尝试在移动设备上实现这一点，您可以在旋转木马上拖动以查看更多项目，这部分没什么大不了的，但我遇到了与桌面版相同的问题，并且我只是想找到一种方法让它变得无限。

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
    });
});

Answer 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>

使用 jQuery 创建一个简单的无限旋转木马

Create a simple infinite carousel using jQuery

css

jquery

carousel

infinite-scroll

twitter-bootstrap