使用jquery的无限响应轮播/滑块

Posted 2021-04-07

我正在使用slick slider，我想创建类似于facebook的滑块。我的意思是这样的：

在此滑块中，当我到达右侧末端时，Facebook会将项目添加到其滑块。这就是为什么在这张照片中左边没有箭头。你可以通过这个link去facebook的游戏页面。由于无法定义在到达滑块末尾时调用的函数，因此我使用以下代码：

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

有没有办法使用原始滑块？

P.S：如果有更好的滑块为我提供与facebook滑块相同的功能，那也不错！

答案

如果你的意思是循环旋转木马滑块，我想这个会有所帮助。这也适用于小型设备和平板电脑。您也可以在同一页面上放置多个轮播。只需复制“DIV” - “SpecDataWrap”并更改ID。

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

另一答案

我认为你要找的是无限滚动。您可以通过在光滑调用中将infinite属性设置为true来设置此项。

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

此外，如果您可以提供fiddle代码，以便我们可以看到您的设置看起来像将来会有所帮助！