@johnpaul.blick
$('.slick-slider').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear' });
$('.slick-slider').slick('slickNext'); $('.slick-slider').slick('slickPrev'); $('.slick-slider').slick('slickGoTo', 3);
Это основные шаги для создания карусели используя библиотеку jQuery Slick.
@johnpaul.blick
Вот пример кода для создания карусели с помощью библиотеки jQuery Slick:
1 2 3 4 5 |
<head> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> </head> |
1 2 3 4 5 |
<div class="slick-slider"> <div class="slick-slide">Слайд 1</div> <div class="slick-slide">Слайд 2</div> <div class="slick-slide">Слайд 3</div> </div> |
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $('.slick-slider').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear' }); }); |
1 2 3 |
$('.slick-slider').slick('slickNext'); // Переключить на следующий слайд $('.slick-slider').slick('slickPrev'); // Переключить на предыдущий слайд $('.slick-slider').slick('slickGoTo', 2); // Переключить на указанный слайд (нумерация с 0) |
1 2 3 |
$('.slick-slider').on('afterChange', function(event, slick, currentSlide){ console.log('Слайд изменен на: ' + currentSlide); }); |
Это основные шаги для создания карусели с использованием библиотеки jQuery Slick. Вы можете дополнительно настроить карусель, добавить анимации, изменить внешний вид и применить другие параметры в соответствии с вашими потребностями.