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>
                

• Одиночный слайд
• Несколько слайдов
• Адаптивный слайдер
• Различная ширина слайдов
• Различная высота слайдов
• Настройка с 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
                    });
                

                    <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').slick({
                      dots: true,
                      infinite: true,
                      speed: 500,
                      fade: true,
                      cssEase: 'linear'
                    });
                

                    $('.add-remove').slick({
                      slidesToShow: 3,
                      slidesToScroll: 3
                    });
                    $('.js-add-slide').on('click', function() {
                      slideIndex++;
                      $('.add-remove').slick('slickAdd','
' + slideIndex + '
');
                    });

                    $('.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;
                      }
                    });
                

                    $('.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
                    });
                

Методы