Настройки стрелок у Slick слайдера (часть 3)
Как показывает практика, для начинающих фронтендеров, самой большой проблемой при кастомизации Slick слайдера, остается настройка стрелок и точек. И если со стилизацией индикаторных точек, мы разобрались на прошлом уроке, то сегодня мы научимся заменять дефолтные стрелки на свои (по макету).
1) HTML разметка
У вас уже должна быть подключена библиотека jQuery и файл самого слайдера slick.min.js. Создадим контейнер для слайдера, внутри которого 6 слайдов с картинками.
2) Инициализация Slick слайдера
Создаем файл script.js и подключаем ранее созданный контейнер для слайдов с классом slider к Slick слайдеру.
$(document).ready(function() <
$('.slider').slick( <
arrows:true, // показать стрелки
dots:false, // не показывать точки
slidesToShow:3, // показывать по 3 слайда
autoplay:true, // автоматическое проигрывание слайдов
>);
>);
После инициализации слайдера, автоматически создались новые теги, а к элементам добавились новые классы (смотрите инструменты разработчика). Через эти классы мы будем управлять внешним видом слайдера в CSS файле (style.css).
3) Стилизация Slick слайдера
Все слайды выстроим в ряд и прибьем их к верхнему краю.
.slick-track <
display: flex;
align-items: flex-start;
>
Спрячем в ограничивающей оболочке слайдера, контент (картинки), выходящий за её пределы.
.slick-list <
overflow: hidden;
>
Зададим промежутки между слайдами и сделаем картинки адаптивными.
.slider__item <
padding: 0px 15px;
>
.slider__item img <
max-width: 100%;
>
4) Настройка стрелок
Данная настройка заключается в замене дефолтных стрелок, на свои. Зададим абсолютное позиционирование для своих стрелок относительно слайдера.
.slider <
position: relative;
padding: 0px 60px; // поля между стрелкой и краем слайдера
>
.slider .slick-arrow <
position: absolute;
top: 50%; // выравнивание по вертикали
margin: -15px 0 0 0; // корректировка вертикального выравнивания
z-index: 2; // стрелки сверху картинок
font-size: 0; // убираем надпись на дефолтной стрелке
width: 30px; // ширина стрелки
height: 30px; // высота стрелки
>
Вставляем фоном заранее заготовленные свои стрелки (вырезаем из макета)
.slider .slick-arrow.slick-prev <
left: 0; // левая стрелка остается с левой стороны слайдера
background: url('../img/left-arrow.png') 0 0 / 100% no-repeat;
>
.slider .slick-arrow.slick-next <
right: 0; // правая стрелка переместилась справа от слайдера
background: url('../img/right-arrow.png') 0 0 / 100% no-repeat;
>
5) Делаем слайдер адаптивным
Добавим в JS файл свойство responsive со следующими настройками: При максимальной ширине окна 768 пикселей, показывать 2 слайда, а при максимальной ширине окна 550 пикселей — 1 слайд.
responsive:[
<
breakpoint: 768,
settings: <
slidesToShow:2
>
>,
<
breakpoint: 550,
settings: <
slidesToShow:1
>
>
]
Замена дефолтных стрелок у slick slider
Каким образом можно заменить стрелки у slick’a ? Нашел такой способ:
Но это не сработало. Хочу заменить стандартные иконки на свои SVG’шные .
Вот вполне рабочий пример. Изменил arrows таким же образом:
Замените внешний вид стрелок с помощью css:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
slick
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
Center Mode
Lazy Loading
Autoplay
Add & Remove
Filtering
Destroy
If you really want to be that guy.
Slider Syncing
Right to Left
Note: the HTML tag or the parent of the slider must have the attribute «dir» set to «rtl».
and a whole lot more.
Getting Started
Set up your HTML markup.
Move the /slick folder into your project
Add slick.css in your <head>
Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
Initialize your slider in your script file or an inline script tag
When complete, your HTML should look something like:
NOTE: I highly recommend putting your initialization script in an external JS file.
Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| accessibility | boolean | true | Enables tabbing and arrow key navigation |
| adaptiveHeight | boolean | false | Enables adaptive height for single slide horizontal carousels. |
| autoplay | boolean | false | Enables Autoplay |
| autoplaySpeed | int(ms) | 3000 | Autoplay Speed in milliseconds |
| arrows | boolean | true | 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» >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» >Next</button> | Allows you to select a node or customize the HTML for the «Next» arrow. |
| centerMode | boolean | 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 | boolean | false | Show dot indicators |
| dotsClass | string | ‘slick-dots’ | Class for slide indicator dots container |
| draggable | boolean | true | Enable mouse dragging |
| fade | boolean | false | Enable fade |
| focusOnSelect | boolean | 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 | boolean | true | Infinite loop sliding |
| initialSlide | integer | 0 | Slide to start on |
| lazyLoad | string | ‘ondemand’ | Set lazy loading technique. Accepts ‘ondemand’ or ‘progressive’ |
| mobileFirst | boolean | false | Responsive settings use mobile first calculation |
| pauseOnFocus | boolean | true | Pause Autoplay On Focus |
| pauseOnHover | boolean | true | Pause Autoplay On Hover |
| pauseOnDotsHover | boolean | 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 | boolean | true | Enable swiping |
| swipeToSlide | boolean | false | Allow users to drag or swipe directly to a slide irrespective of slidesToScroll |
| touchMove | boolean | true | 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 | boolean | true | Enable/Disable CSS Transitions |
| useTransform | boolean | true | Enable/Disable CSS Transforms |
| variableWidth | boolean | false | Variable width slides |
| vertical | boolean | false | Vertical slide mode |
| verticalSwiping | boolean | false | Vertical swipe mode |
| rtl | boolean | false | Change the slider’s direction to become right-to-left |
| waitForAnimate | boolean | true | Ignores requests to advance the slide while animating |
| zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower |
Events
In slick 1.4, callback methods have been deprecated and replaced with events. Use them as shown below:
| Event | Arguments | Description |
|---|---|---|
| afterChange | slick, currentSlide | Fires after slide change |
| beforeChange | slick, currentSlide, nextSlide | Fires before slide change |
| breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit. |
| destroy | event, slick | When slider is destroyed, or unslicked. |
| edge | slick, direction | Fires when an edge is overscrolled in non-infinite mode. |
| init | slick | Fires after first initialization. |
| reInit | slick | Fires after every re-initialization |
| setPosition | slick | Fires after position/size changes |
| swipe | slick, direction | Fires after swipe/drag |
| lazyLoaded | event, slick, image, imageSource | Fires after image loads lazily |
| lazyLoadError | event, slick, image, imageSource | Fires after image fails to load |
Methods
Methods are called on slick instances through the slick method itself in version 1.4, see below:
Изучаем JavaScript
— поддерживает touch events — можно просматривать с телефона, листая пальцем
— поддерживает responsive — можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному
Хорошая практика — подключение скриптов из папки bower_components
<script src=»https://studyjavascript.blogspot.com/2017/06/bower_components/jquery/dist/jquery.min.js»></script>
<script src=»https://studyjavascript.blogspot.com/2017/06/bower_components/slick-carousel/slick/slick.min.js»></script>
<script src=»https://studyjavascript.blogspot.com/2017/06/js/custom.js»></script>
Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются.
Что касается стилей, которые находятся в папке slick: slick.css, slick.less, slick.theme.less их лучше скопировать в папку с css и подключить оттуда. Если оставить их на месте, и в стили слайдера вносить изменения, то при обновлении скрипта все эти изменения будут утеряны.
В отличии от других слайдеров, кадры размещаются не в списке, а в блоках:
Вызов без параметров
При вызвове плагина без параметров получаем простой вариант с одним слайдом на странице и навигационные стрелки.
Показ нескольких слайдов
В примере мы установили для «slick slider» параметры зацикленной прокрутки, включили отображение навигационных точек, указали количество отображаемых и прокручиваемых слайдов.
$ ( ‘.multiple-items’ ). slick ( <
infinite : true ,
dots : true ,
slidesToShow : 3 ,
slidesToScroll : 1
>);
Режим центрирования
В режиме центрирования активный слайд устанавливается по центру.
$ ( ‘.center’ ). slick ( <
centerMode : true ,
slidesToShow : 3 ,
>);
Центральный слайд имеет класс «slick-center», а значит можно его отдельно оформить.
Адаптивность
В слайдере можно настроить адаптивный вывод определенного количества слайдов в зависимости от значения ширины экрана. К примеру, вам необходимо, чтобы при ширине экрана менее 600 пикселей выводилось только 2 слайда, а переключались они по одному. Решение данной задачи будет выглядеть так
Плавное переключение
Плавное переключение без перемещения
Настройка slick slider
- аccessibility – начальное значение этого параметра установлено как true, он отвечает за подключения навигационных кнопок для слайдера – это стрелки вперед и назад, а также кнопки в виде точек.
- adaptiveHeight – применяется только к одиночному слайдеру, у которого будет изменятся высота родительского контейнера в зависимости от высоты слайдера. В начальных условиях настройка не подключена.
- autoplay – настраивает перелистывание слайдов в автоматическом режиме, без вмешательства пользователя. Стандартное значение этой настройки соответствует false.
- autoplaySpeed – этот параметр является вспомогательным для autoplay и устанавливает промежуток времени, по истечении которого будет осуществлено автоматическое перелистывание слайда. Изначально для него прописано значение 3000 миллисекунд.
- arrows – подключает к слайдеру стрелки вперед и назад. С помощью таблицы внешних стилей можно изменять положение и внешний вид этих стрелок.
- asNavFor – устанавливает навигационную связь между двумя слайдерами посредством идентификатора или класса. В начальных условиях параметр соответствует нулевому значению.
- prevArrow – позволяет изменить внешний вид стандартной навигационной стрелки, которая отлистывает предыдущий слайд.
- nextArrow – аналогичен функциям предыдущему параметру, но отвечает за стрелку, переключающую слайд вперед.
- centerMode – фиксирует текущий слайд по центру родительского контейнера, изначально параметр выключен.
- centerPadding – при включенном центральном режиме показа текущего слайда (предыдущий параметр) устанавливает для этого слайда внутренний отступ, что визуально позволяет увеличивать текущий слайд.
- cssEase – отвечает за анимацию переключения картинок, может делать ее плавной или более резкой. Принимает стандартное значение ‘ease’.
- customPaging – позволяет вставлять собственный шаблон для просмотра слайдера.
- dots – подключает точки-переключатели, по умолчанию находится в выключенном состоянии.
- draggable – подключает возможность перелистывания слайдов зажатием мышки. То есть, если навести на слайдер курсор мыши, зажать ее и передвинуть в сторону, то и слайд переключится на следующий.
- fade – создает эффект затухания слайда при переключении, анимационный эффект.
- focusOnSelect – фокусирует заданный элемент слайдера.
- easing – позволяет установить особый анимационный режим при переключении картинок.
- edgeFriction – отключает переключение слайдов на последнем элементе. Срабатывает только в том случае, если слайдер не зациклен.
- infinite – зацикливает показ слайдов. Это значит при переключении последней картинки слайд-шоу начнется сначала.
- initialSlide – определяет картинку, с которой начнется показ слайд-шоу. По умолчанию слайдер для старта выбирает первое по порядку изображение.
- lazyLoad – позволяет установить режим подгрузки следующих слайдов. Доступно только 2 значения для настройки: ‘ondemand’ и ‘progressive’, причем последнее является значением по умолчанию.
- pauseOnHover – останавливает перелистывание слайдов при наведении курсора мыши на тело слайдера. Работает, только если определено автоматическое переключение слайдов.
- pauseOnDotsHover — останавливает перелистывание слайдов при наведении курсора мыши на точечные переключатели. Работает, только если определено автоматическое переключение слайдов.
- respondTo – вызывает реакцию на изменения ширины окна браузера. Для использования доступны три значения: ‘window’, ‘slider’ или ‘min’.
- responsive – позволяет адаптировать настройки слайдера под ширину экрана. Отличается от предыдущей настройки тем, что ограничение ширины определяется точным значением в пикселях. Используется для адаптивной верстки под мобильные устройства.
- slidesToShow – позволяет установить количество картинок, выводимых в видимой зоне. Изначально показывается 1 слайд, но этим значением можно варьировать.
- slidesToScroll – сообщает слайдеру сколько нужно поменять картинок при переключении.
- speed – фиксирует скорость, с которой будет осуществляться переключение слайдов.
- variableWidth – адаптирует ширину контейнеров слайдера под ширину каждой показываемой картинки.
1. Скачиваем репозиторий здесь https://github.com/kenwheeler/slick
2. В файле index.html перед открывающим <body> подключаем стили слайдера:
<link rel=»stylesheet» href=»css/slick.css»>
<link rel=»stylesheet» href=»css/slick-theme.css»>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
Перед закрывающим </body> подключаем скрипты
<script src=»https://studyjavascript.blogspot.com/2017/06/js/jquery-3.2.1.min.js»></script>
<script src=»https://studyjavascript.blogspot.com/2017/06/js/slick.min.js»></script>
<script src=»https://studyjavascript.blogspot.com/2017/06/script.js»></script>
</body>
Ещё этот слайдер требует шрифты. Папку fonts из папки слайдера нужно поместить в папку css проекта.
И ещё в папке слайдера нужно найти рисунок ajax-loader.gif и в файле slick-theme.css прописать путь к нему
3. Теперь диву-обёртке слайдера присваиваем класс, например, multiple-items
А в файле script.js пишем код
$(document).ready(function() <
$(‘.multiple-items’).slick( <
autoplay: false,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
dots: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1
>);
>);
4. Слайдер уже работает. Вот только стрелок не видно, потому что они за границами слайдера, а ширина слайдера у меня во весь экран. Стрелки ищем в файле slick-theme.cssи меняем отступы, так чтобы стрелки оставались внутри слайдера, а не снаружи.
5. Хорошо. Теперь, по моей задумке, центральный слайд слайдера должен отличаться от боковых.
Здесь пишут, что достаточно прописать в коде
$(‘.middle’).slick( <
centerMode: true,
//центруем текущий слайд
centerPadding: ’50px’,
//слегка увеличиваем текущий слайд
slidesToShow: 3
//выводим 3 слайда для просмотра
>);
. чтобы увеличить размер центрального слайдера. На самом деле такой способ не работает
Увеличила центральный слайд стилем
.slick-center <
background-color: #8cc63f;
transform: scale(1.3);
>