如何做無限滾動。

Question

我的問題是如何做無限滾動幻燈片。

這個例子說明了什麼，我需要https://www.snapchat.com/geofilters#carousel-container

請，我想酷似snapchat幻燈片。

這是我的代碼

<style type="text/css"> 

body,html {margin:0; padding:0;} 
    .screenshots-slide {position:relative; max-width:1100px; margin:0 auto;} 
    .screenshots-slide img {width:100%;} 
    .screenshots-slide li {display: inline-block; width:200px; margin:0 22px 0 0; } 
    .screenshots-slide-elms ul { 
    opacity: 1; 
    transform: translate3d(0px, 0px, 0px); 
    /* width: 4620px; */ 
    transition: -webkit-transform 500ms ease 0s; 
    } 
    .screenshots-slide-elms {position:absolute; top:60px; white-space:nowrap; max-width:100%; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    display: block; 
    overflow: auto; 
    margin: 0; 
    padding: 0 
    } 
    .header-phone-background {position:relative; z-index: 1; overflow:hidden; width:100%; max-width:232px; height:480px; margin:0px auto 0 auto; background:url("http://i.imgur.com/KBGCki9.png") no-repeat scroll 0% 0%/100% auto;} 
</style> 
<div class="screenshots-slide"> 
<div class="header-phone-background"></div> 
<div class="screenshots-slide-elms"> 
<ul> 
    <li data-saf="1"> 
     <img src="https://lh3.googleusercontent.com/A5KYbufCprxt0PO57ilqs2E42MKEzCLMRn_JYLQiKZUlE1w-wN_gx_8M1qvNne3cPuYNnwEv86BQbZqxgNLyLAkVcQ"/> 
    </li> 
    <li data-saf="2"> 
     <img src="https://lh3.googleusercontent.com/7cIJUKDkKwgKMiYB19AqnD8m75xWGGsoTc5ifcVr1UPZGUh_sGgIX9jTyY_LiXgk6p2NydTOjqln0b3DL3nxDe7chA"/> 
    </li> 
    <li data-saf="3"> 
     <img src="https://lh3.googleusercontent.com/GndgN9b3NKFFDPjDxtpqzTPOPhtFFGpAf_pxQ0OU-gQciDeqKRM_AwOnCwvOV78bFU6BWGFPfwwoIGG72I72-0Oe-NU"/> 
    </li> 
    <li data-saf="4"> 
     <img src="https://lh3.googleusercontent.com/_v-HbNHvVCzS0GN0kSGkYWAF8JmJ15D7fCMKgYSa3YMFBCU0ClNSw2Ksfql7w3V1DUQc_oRZf5adnYcFSEbQyBAT"/> 
    </li> 
    <li data-saf="5"> 
     <img src="https://lh3.googleusercontent.com/Q-tFwVB3rhhoxSq45GZ_P0O6k1EMg5TEsmVvnH1xqEOZUgRr9JTqK_Q-akm3cwIPLLhKdFHxaWqE6BcZIUnSTWkzCOk"/> 
    </li> 
    <li data-saf="6"> 
     <img src="https://lh3.googleusercontent.com/ut4BuHGec6SD3y_RLQkfOmxfll6sSHgERWjfO3dLhKXuD11czuwK1sUlKymyP7EVNYgk2n2Pl_bFcL7ZXG1J750thg"/> 
    </li> 
    <li data-saf="7"> 
     <img src="https://lh3.googleusercontent.com/ut4BuHGec6SD3y_RLQkfOmxfll6sSHgERWjfO3dLhKXuD11czuwK1sUlKymyP7EVNYgk2n2Pl_bFcL7ZXG1J750thg"/> 
    </li> 
    <li data-saf="8"> 
     <img src="https://lh3.googleusercontent.com/MaxAAO8dqk08VUFKiOg3xp4wzcU9BsUfCq_d0kFGW-wOFSCU_rjJkloWnhhY6wxd1e_TZ6o5NhGxbnpSD6IUnUXGrfE"/> 
    </li> 
    <li data-saf="9"> 
     <img src="https://lh3.googleusercontent.com/MaxAAO8dqk08VUFKiOg3xp4wzcU9BsUfCq_d0kFGW-wOFSCU_rjJkloWnhhY6wxd1e_TZ6o5NhGxbnpSD6IUnUXGrfE"/> 
    </li> 
</ul> 
</div> 
</div> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var start_in = 0; 
     setInterval(function() { 
      start_in += 226; 
      $(".screenshots-slide-elms ul").each(function() { 
       $(this).css({ 
        "transition" : "-webkit-transform 500ms ease 0s", 
        "transform" : "translate3d(-"+start_in+"px, 0px, 0px)", 
       }); 
      }); 
     },2000); 
    }); 
</script> 

我上的jsfiddle代碼：https://jsfiddle.net/hrcp9rsg/

請幫助。

Answer 1

鏈接到您正在使用油滑滑塊http://kenwheeler.github.io/slick/

的例子，我用了很多的工作項目。它的工作方式是將圖像從開始克隆/附加到圖像（在視圖離開後）並結束。基本上，滑塊總是從滑塊的始端移動到結束。