Настройка Slick-карусели (slick-слайдер)
Простые примеры настройки slick-карусели. Официальная документация здесь — https://kenwheeler.github.io/slick/, ссылка на GIT — https://github.com/kenwheeler/slick/.
Подключаем необходимые скрипты и стили через CDN, можно подключать и локально.
Подключаем стили для карусели Slick и по необходимости базовые стили темы для карусели
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
// подключите slick-theme.css для использования стандартной темы отображения навигации
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
Подключаем jQuery и библиотеку slick.min.js
// jquery
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
// slick.min.js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
Пример HTML разметки для Slick карусели, по сути, есть контейнер с классом, который мы будем использовать для инициализации слайдера, и каждый слайд обернут в отдельный блок.
<div class="slick-carousel">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
Простая инициализация слайдера:
$('.single-item').slick();
Примеры использования Slick-слайдера
Single Item — Один элемент
Multiple Items
Responsive Display
Variable Width
Adaptive Height
Data Attribute Settings
Center Mode
Lazy Loading
Autoplay
Fade
Slider Syncing
События (Events)
// 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);
});
Больше настроек ищите на оф. сайте слик-слайдера — https://kenwheeler.github.io/slick/
Задача — есть элементы с неправильной формой, пятиугольники, шестиугольники, скошенные углы, элементы построены с помощью…
Этот пост вытащил из многолетних черновиков, поэтому особо расписывать не буду. Просто юзайте код. Итак,…
Суть проблемы — в Internet Explorer если задаем отображение блоков в колонку flex-direction: column, то…
Все вебмастера и дизайнеры используют Google Fonts или хотя бы раз да использовали. Это Google шрифты, которые без особых навыков или долгих настроек можно подключить на своем сайте или использовать в своем макете.
