从自动播放循环中的第一个滑块自动播放滑块

滑块滑块设置为自动播放。在比赛时，幻灯片从左到右或从头到尾。当最后一张幻灯片到达滑块时，它会从最后一张幻灯片开始自动运行，然后首先向后滑动。从自动播放循环中的第一个滑块自动播放滑块

我希望当滑块在最后一张幻灯片到达时，滑块可以从第一张幻灯片播放而不是最后播放。

最初当无限滚动是'真'时，一切工作正常。但由于要求，我必须将无限滚动设置为'假'。当无限滚动设置为'假'时发生上述问题。

这里是Fiddle。

$(document).ready(function() { 
 

 
    $('.slider-1').slick({ 
 
    dots: true, 
 
    infinite: false, 
 
    autoplay: true, 
 
    autoplaySpeed: 1000, 
 
    pauseOnFocus: false, 
 
    pauseOnHover: false, 
 
    pauseOnDotsHover: false, 
 
    slidesToShow: 3, 
 
    slidesToScroll: 3, 
 
    }); 
 

 
    $('.slider-2').slick({ 
 
    dots: true, 
 
    infinite: false, 
 
    autoplay: true, 
 
    autoplaySpeed: 1000, 
 
    pauseOnFocus: false, 
 
    pauseOnHover: false, 
 
    pauseOnDotsHover: false, 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    fade: true, 
 
    cssEase: 'linear' 
 
    }); 
 

 
});

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/> 
 
<link href="https://kenwheeler.github.io/slick/css/prism.css" rel="stylesheet"/> 
 
<link href="https://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script> 
 

 
<section id="features" class="blue"> 
 
<div class="content"> 
 
    <div class="slider slider-1"> 
 
    <div><h3>1</h3></div> 
 
    <div><h3>2</h3></div> 
 
    <div><h3>3</h3></div> 
 
    <div><h3>4</h3></div> 
 
    <div><h3>5</h3></div> 
 
    <div><h3>6</h3></div> 
 
    <div><h3>7</h3></div> 
 
    <div><h3>8</h3></div> 
 
    </div> 
 

 
    <div class="slider slider-2"> 
 
    <div><h3>1</h3></div> 
 
    <div><h3>2</h3></div> 
 
    <div><h3>3</h3></div> 
 
    <div><h3>4</h3></div> 
 
    <div><h3>5</h3></div> 
 
    <div><h3>6</h3></div> 
 
    <div><h3>7</h3></div> 
 
    <div><h3>8</h3></div> 
 
    </div> 
 
</div> 
 
</section>

如果任何人有一个解决方案/建议，请帮助。在此先感谢。

来源

2016-06-20 Rick

哪里小提琴？ – user2314737

https://jsfiddle.net/rickharrison1504/mhtrbhfx/ – Rick

试试这个代码：

$('.slider-2').slick({ 
     dots: true, 
     autoplay: true, 
     autoplaySpeed: 1000, 
     pauseOnFocus: false, 
     pauseOnHover: false, 
     pauseOnDotsHover: false, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     fade: true, 
     cssEase: 'linear' 
    });

来源

2016-06-20 08:09:07

感谢@BilasSarker的回复。我想无限滚动是'假'。 – Rick

你有什么理由让你想要无限滚动为'假'？我是否应该先将它假设为假，然后才会是真的？ –

我将无限滚动设置为false，因为我只想在第一张幻灯片上显示右侧导航箭头，并且只在最后一张幻灯片上显示左侧导航箭头。为了做到这一点，我必须将无限滚动设置为'false'。有没有解决方案来实现上述目标（导航箭头），而无需将无限滚动设置为'false'？ – Rick

-1

$(document).ready(function() { 

    $('.slider-1').slick({ 
    dots: true, 
    infinite: 0, 
    autoplay: true, 
    autoplaySpeed: 1000, 
    pauseOnFocus: false, 
    pauseOnHover: false, 
    pauseOnDotsHover: false, 
    slidesToShow: 3, 
    slidesToScroll: 3, 
    }); 

    $('.slider-2').slick({ 
    dots: true, 
    infinite: 0, 
    autoplay: true, 
    autoplaySpeed: 1000, 
    pauseOnFocus: false, 
    pauseOnHover: false, 
    pauseOnDotsHover: false, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    fade: true, 
    cssEase: 'linear' 
    }); 

});

来源

2017-04-05 09:23:45 user7819511

从自动播放循环中的第一个滑块自动播放滑块

回答

相关问题