Ползунок слайдера с первого слайдера в автопилоте

Ползунок Slick установлен на автовоспроизведение. Во время игры слайды начинаются слева направо или сначала до последнего. Когда ползунок достигнут на последнем слайде, он начинает автовоспроизведение с последнего слайда, чтобы сначала скользить в обратном направлении.Ползунок слайдера с первого слайдера в автопилоте

Я хочу, чтобы ползунок играл с первого слайда, а не на последнем, когда ползунок достигнут на последнем слайде.

Первоначально, когда бесконечный свиток был «истинным», все работало нормально. Но из-за этого мне пришлось установить бесконечный свиток в значение «false». Вышеупомянутая проблема возникла, когда бесконечная прокрутка установлена на «false».

Вот 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

Ползунок слайдера с первого слайдера в автопилоте

ответ

Смежные вопросы