Как go вернуться к слайду 1 при повторном нажатии кнопки, используя Slick. JS - PullRequest
Новая
       3

Как go вернуться к слайду 1 при повторном нажатии кнопки, используя Slick. JS

0 голосов
/ 27 февраля 2020

У меня проблемы с добавлением функции перезапуска с помощью slick. js. Я хочу, чтобы, когда слайдер достиг последнего слайда, была кнопка с надписью «начать снова», и когда пользователь нажимает кнопку, слайдер будет go для слайда 1, но я не использовал `` l oop: false` ``.

Вот полный код: https://codepen.io/tezahzulueta-the-looper/pen/WNvpZoV

$(function () {
  $('.timeline-nav').slick({
    slidesToShow: 28,
    slidesToScroll: 1,
    asNavFor: '.timeline-slider',
    centerMode: false,
    focusOnSelect: true,
    mobileFirst: true,
    arrows: false,
    infinite: false,
    responsive: [{
        breakpoint: 768,
        settings: {
          slidesToShow: 4,
        }
      },
      {
        breakpoint: 0,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 2,
        }
      }
    ]
  });

  $('.timeline-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    asNavFor: '.timeline-nav',
    centerMode: true,
    cssEase: 'ease',
    edgeFriction: 0.5,
    mobileFirst: true,
    speed: 500,
    infinite: false,
    arrows: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
    responsive: [{
        breakpoint: 0,
        settings: {
          centerMode: false
        }
      },
      {
        breakpoint: 768,
        settings: {
          centerMode: true
        }
      }
    ]
  });
  
  $('.timeline-slider').slick('slickGoTo', 0);

});

1 Ответ

0 голосов
/ 27 февраля 2020

Решите это, добавив функцию перезапуска, см. Ниже: 

$(function () {
  $('.timeline-nav').slick({
    slidesToShow: 28,
    slidesToScroll: 1,
    asNavFor: '.timeline-slider',
    centerMode: false,
    focusOnSelect: true,
    mobileFirst: true,
    arrows: false,
    infinite: false,
    responsive: [{
        breakpoint: 768,
        settings: {
          slidesToShow: 4,
        }
      },
      {
        breakpoint: 0,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 2,
        }
      }
    ]
  });

  $('.timeline-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    asNavFor: '.timeline-nav',
    centerMode: true,
    cssEase: 'ease',
    edgeFriction: 0.5,
    mobileFirst: true,
    speed: 500,
    arrows: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
    responsive: [{
        breakpoint: 0,
        settings: {
          centerMode: false
        }
      },
      {
        breakpoint: 768,
        settings: {
          centerMode: true
        }
      }
    ]
  });

});

function restart() {
  $('.timeline-slider').slick('slickGoTo', 0);
}
...