Установка и настройка 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);
});
событиеаргументыописание
afterChangeslick, currentSlideFires after slide change
beforeChangeslick, currentSlide, nextSlideFires before slide change
breakpointevent, slick, breakpointFires after a breakpoint is hit.
destroyevent, slickWhen slider is destroyed, or unslicked.
edgeslick, directionFires when an edge is overscrolled in non-infinite mode.
initslickFires after first initialization.
reInitslickFires after every re-initialization
setPositionslickFires after position/size changes
swipeslick, directionFires after swipe/drag
lazyLoadedevent, slick, image, imageSourceFires after image loads lazily
lazyLoadErrorevent, slick, image, imageSourceFires after image fails to load

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

// 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');
методаргументыописание
slickCurrentSlide нетReturns the current slide index
slickGoTo нетNavigates to the next slide
slickNext нетNavigates to the next slide
slickPrev нетNavigates to the previous slide
slickPause нетPauses autoplay
slickPlay нетStarts autoplay
slickAddhtml or DOM object, index, addBeforeAdd a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
slickRemoveindex, removeBeforeRemove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilterSelector or FunctionFilters slides using jQuery .filter()
slickUnfilterindexRemoves applied filtering
slickGetOptionoption : stringGets an individual option value.
slickSetOptionoption : string, value : depends on option, refresh : booleanSets an individual value live. Set refresh to true if it’s a UI update.
unslick нетDeconstructs slick
getSlick нетGet Slick Object

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

        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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2 + шесть =