Установка и настройка Slick Slider

Итак, по существу. Чтобы установить слик слайдер нужно:

1. Скачать скрипты (js и css). Альтернатива: скачать на github.

2. Подключить js и css скрипты:

/* CSS */

/* Локально */
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

/* ...или из репозитория */
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

/* Add the new slick-theme.css if you want the default styling */
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>



/* JS */

/* Обязательно JQuery 1.7+ */
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

/* slick.js добавляем после jQuery */
/* Локально */
<script type="text/javascript" src="slick/slick.min.js"></script>
/* ...или из репозитория */
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

3. Создать контейнер и структуру для слайдера:

<div class="slick-class">
	<div>slide 1</div>
	<div>slide 2</div>
	<div>slide N</div>
</div>

4. Инициализировать слайдер, создав код настроек в футере для запуска слайдера:

jQuery(function($) {

	$(document).ready(function(){
		
		$('.slick-class').slick({
			
			setting-name: setting-value
		
		});
	
	});

});

После этого можно играться с настройками и вместо setting-name: setting-value вставлять следующие вариации:

• accessibility true|false — Enables tabbing and arrow key navigation.
• adaptiveHeight true|false — Enables adaptive height for single slide horizontal carousels.
• autoplay true|false — Enables Autoplay.
• autoplaySpeed int(ms) [3000] — Autoplay Speed in milliseconds.
• arrows true|false — Prev/Next Arrows.
• asNavFor string [null] — Set the slider to be the navigation of other slider (Class or ID Name).
• appendArrows string [$(element)] — Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object).
• appendDots string [$(element)] — Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object).
• prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) [<button type=»button» class=»slick-prev»>Previous</button>] — Allows you to select a node or customize the HTML for the «Previous» arrow.
• nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) [<button type=»button» class=»slick-next»>Next</button>] — Allows you to select a node or customize the HTML for the «Next» arrow.
• centerMode true|false — Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
• centerPadding string [’50px’] — Side padding when in center mode (px or %)
• cssEase string [‘ease’] — CSS3 Animation Easing
• customPaging function [n/a] — Custom paging templates. See source for use example.
• dots true|false — Show dot indicators
• dotsClass string [‘slick-dots’] — Class for slide indicator dots container
• draggable true|false — Enable mouse dragging
• fade true|false — Enable fade
• focusOnSelect true|false — Enable focus on selected element (click)
• easing string [‘linear’] — Add easing for jQuery animate. Use with easing libraries or default easing methods
• edgeFriction integer [0.15] — Resistance when swiping edges of non-infinite carousels
• infinite true|false — Infinite loop sliding
• initialSlide integer [0] — Slide to start on
• lazyLoad string [‘ondemand’] — Set lazy loading technique. Accepts ‘ondemand’ or ‘progressive’
• mobileFirst true|false — Responsive settings use mobile first calculation
• pauseOnFocus true|false — Pause Autoplay On Focus
• pauseOnHover true|false — Pause Autoplay On Hover
• pauseOnDotsHover true|false — Pause Autoplay when a dot is hovered
• respondTo string [‘window’] — Width that responsive object responds to. Can be ‘window’, ‘slider’ or ‘min’ (the smaller of the two)
• responsive object [none] — Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to «unslick» instead of an object to disable slick at a given breakpoint.
• rows int [1] — Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
• slide element [»] — Element query to use as slide
• slidesPerRow int [1] — With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
• slidesToShow int [1] — # of slides to show
• slidesToScroll int [1] — # of slides to scroll
• speed int(ms) [300] — Slide/Fade animation speed
• swipe true|false — Enable swiping
• swipeToSlide true|false — Allow users to drag or swipe directly to a slide irrespective of slidesToScroll
• touchMove true|false — Enable slide motion with touch
• touchThreshold int [5] — To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider
• useCSS true|false — Enable/Disable CSS Transitions
• useTransform true|false — Enable/Disable CSS Transforms
• variableWidth true|false — Variable width slides
• vertical true|false — Vertical slide mode
• verticalSwiping true|false — Vertical swipe mode
• rtl true|false — Change the slider’s direction to become right-to-left
• waitForAnimate true|false — Ignores requests to advance the slide while animating.
• zIndex number [1000] — Set the zIndex values for slides, useful for IE9 and lower

И события для тех, кто в деле:

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

И методы для них же:

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');

Примеры настроек:

        lazyLoad: 'ondemand',
        slidesToShow: 4,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        infinite: true,
        speed: 500,
        responsive: [
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 2 
              }
            }
          ]



        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        infinite: true,
        speed: 500,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                  arrows: true,
                  slidesToShow: 2
                }
            },
            {
              breakpoint: 768,
              settings: {
                arrows: false,
                slidesToShow: 1
              }
            }
          ]



	$('.banner-slick').slick({
        lazyLoad: 'ondemand',
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        infinite: true,
        useTransform: true,
        speed: 500