Slick Slider - установка, настройка примеры и документация

Один из популярнейших слайдеров на Jquery является Slick Slider . И это не мудрено, так как данный плагин умеет очень много. В большинстве случаев вы будите использовать общепринятые модели слайдера, но давайте взглянем на, что способен данный плагин. А способен о на многое. Для начала подключаем файлы стилей к нашему проекту, я буду в примере использовать файлы из CDN вы можете скачать дистрибудив слайдера Slick с офф. сайта или с Github https://github.com/kenwheeler/slick/

Подключаем файлы стилей.

  
    <!-- Добавляем стили из CDN -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>
    <!-- Добавляем тему по умолчанию из CDN -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>
  

Подключаем сам плагин.

Данный код должен быть в самом конце, перед закрывающим тегом </body>

  
    <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>
  

Список возможностей использования Slick Slider

• Одиночный слайд
• Несколько слайдов
• Адаптивный слайдер
• Различная ширина слайдов
• Различная высота слайдов
• Настройка с Data атрибутом
• Режим центрирования слайда
• Ленивая загрузка
• Автоматическая прокрутка
• Смена слайдов размытием Fade
• Добавление и удаление слайдов
• Фильтрация слайдов
• Уничтожить объект
• Синхронизация слайдеров
• Справа налево
• Насторйки
• События
• Методы

Одиночный слайд

  
    //Иницилизируем слайдер с параметрами по умолчанию
    $('.single-item').slick();
  

Несколько слайдов

  
    //Указываем что будем выводить по 3 слайда на экран
    $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
  

Адаптивный слайдер

  
    //Настройки по выводу слайдов в зависимости от разрешения экрана
    $('.responsive').slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
  

Различная ширина слайдов

  
    $('.variable-width').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
  

Различная высота слайдов

  $('.one-time').slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true
  });

Настройка с Data атрибутом

Внимание:

Начиная с Slick 1.5 вы можете добавлять настройки, используя атрибут data-slick . Вам все еще нужно вызвать $(element).slick() , чтобы инициализировать Slick на элементе.

  <div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
      <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>

Режим центрирования слайда

    
      $('.center').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 3,
      responsive: [
          {
              breakpoint: 768,
              settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: '40px',
                  slidesToShow: 3
              }
          },
          {
          breakpoint: 480,
          settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: '40px',
                  slidesToShow: 1
              }
          }
      ]
      });
    

Ленивая загрузка

    
      // Используйте леневую загрузку устаноиви ее в data-lazy атрибудет
      // В нем укажите источник к файлу в место SRC

      <img data-lazy="img/lazyfonz1.png"/>

      $('.lazy').slick({
          lazyLoad: 'ondemand',
          slidesToShow: 3,
          slidesToScroll: 1
      });
    

Автоматическая прокрутка

  $('.autoplay').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
  });

Смена слайдов размытием Fade

  
    $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    });
  

Добавление и удаление слайдов

Добавить слайд Удалить слайд

  
    $('.add-remove').slick({
            dots: true,
            slidesToShow: 3,
            speed: 500,
            slidesToScroll: 3
        });
        var slideIndex = 1;
        $('.js-add-slide').on('click', function() {
            slideIndex++;
            $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
        });

        $('.js-remove-slide').on('click', function() {
            $('.add-remove').slick('slickRemove',slideIndex - 1);
            if (slideIndex !== 0){
            slideIndex--;
        }
    });
  

Фильтрация слайдов

  
    $('.filtering').slick({
            slidesToShow: 4,
            slidesToScroll: 4
        });

        var filtered = false;

        $('.js-filter').on('click', function(){
            if (filtered === false) {
                $('.filtering').slick('slickFilter',':even');
                $(this).text('Unfilter Slides');
                filtered = true;
            } else {
                $('.filtering').slick('slickUnfilter');
                $(this).text('Filter Slides');
                filtered = false;
        }
    });
  

Уничтожить объект

Если ты действительно хочешь быть тем парнем ...

  
    //Уничтожить объект слайдера
    $('.your-slider').slick('unslick');
  

Синхронизация слайдеров

  
    $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
    });
  

Справа налево

  
    $('.single-item-rtl').slick({
        rtl: true
    });