бесконечный отзывчивый карусель/слайдер с использованием jquery

Question

Я использую slick slider, и я хочу создать что-то похожее на слайдер facebook. Что я имею в виду что-то вроде этого:

В этом слайдере, facebook добавляет элементы в его слайдер, когда я дойти до конца правой стороны. Вот почему на этой картине нет стрелки для перехода налево. Вы можете перейти на страницу игры на facebook этим link. Поскольку не существует никакого способа определить функцию, которая будет вызвана при достижении конца слайдера, я использую этот код:

var intervalID = 0 ; 
function checkSlider(){ 
    if($("#slider .slick-next").hasClass('slick-disabled')){ 
    window.clearInterval(intervalID); 
    ajaxCallToAddContent(); 
    } 
} 

function ajaxCallToAddContent(){ 
    //after adding contents, set t 
    intervalID = window.setInterval(function(){checkSlider();}, 500); 
} 
ajaxCallToAddContent(); 

Есть ли способ сделать это с помощью ползунка Orginal?

P.S: Если есть какой-либо лучший слайдер, который обеспечит мне ту же функциональность, что и ползунок facebook, это тоже было бы неплохо!

Answer 1

Я думаю, что вы ищете бесконечную прокрутку. Вы можете установить это, установив для свойства бесконечности значение true в slick-вызове.

$(document).ready(function(){ 
     $('.your-class').slick({ 
     infinite: true 
     }); 
    }); 

Кроме того, было бы полезно в будущем, если вы могли бы предоставить fiddle с кодом, так что мы можем увидеть, что ваши установки выглядит как!

Answer 2

Если вы имеете в виду циклический слайдер карусели, я думаю, что этот поможет. Это будет работать и на небольших устройствах и планшетах. Вы можете иметь несколько каруселей на одной странице. Просто скопируйте «DIV» - «SpecDataWrap» и измените идентификатор.

<div class="ContainerWrap"> 
    <div class="Container"> 
     <div class="AllSpecsDataWrap"> 
      <div class="SpecDataWrap" id="SpecDataWrap1"> 
       <div class="SpecDataSlides activeNavSlide"> 
        <img src="http://s19.postimg.org/lzem156s3/image1.jpg" /> 
        <div class="SpecDesc SpecDescRight"> 
         <h2>Choose to be unique.</h2> 
         <div class="SpecDescDetails"> 
          Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique. 
         </div> 
        </div> 
       </div> 
       <div class="SpecDataSlides InActiveNavSlide"> 
        <img src="http://s19.postimg.org/6cira13mb/image2.jpg" /> 
        <div class="SpecDesc SpecDescLeft"> 
         <h2>Choose to be unique.</h2> 
         <div class="SpecDescDetails"> 
          Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique. 
         </div> 
        </div> 
       </div> 
       <div class="SpecDataSlides InActiveNavSlide"> 
        <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" /> 
        <div class="SpecDesc SpecDescRight"> 
         <h2>Choose to be unique.</h2> 
         <div class="SpecDescDetails"> 
          Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique. 
         </div> 
        </div> 
       </div> 
       <div class="SpecSlideNavigation"> 
        <div class="leftNavSpec SpecSlideNav"></div> 
        <div class="bulletsNavSpec"> 
         <ul> 
          <li class="activeImage"></li> 
          <li class="InActiveImage"></li> 
          <li class="InActiveImage"></li> 
         </ul> 
         <div class="clearFix"></div> 
        </div> 
        <div class="RightNavSpec SpecSlideNav"></div> 
       </div> 
       <div class="clearFix"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Вы можете увидеть JS и CSS код здесь: https://jsfiddle.net/raju_sumit/Ld21vutz/