Адаптивный слайдер с поддержкой сенсорных дисплеев slick.js
В природе существует множество различных слайдеров, ротаторов. Однако у всех есть свои плюсы и минусы. В этой статье я хочу поделиться одним очень удобным, на мой взгляд, слайдером slick.js. Настройки слайдера просты до безумия и работает сразу. Плюс ко всему он является адаптивным и умеет подстраиваться под различные разрешения дисплеев.
Помимо прочего, слайдер поддерживает перелистывание путем перетаскивания элементов на сенсорном дисплее, что несомненно порадует посетителей вашего сайта, использующих смартфон или планшет.
Итак, слайдер имеет название slick.js.. Для подключения слайдера на сайте, вставьте код в head вашего сайта следующие строки:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="slick/slick.min.js"></script>
Вот и все! Слайдер готов к работе. Теперь все, что вам остается, это подключить его к необходимым элементам. Пишем html:
<div class="my-slider">
<div>СОДЕРЖМОЕ 1</div>
<div>СОДЕРЖМОЕ 2</div>
<div>СОДЕРЖМОЕ 3</div>
<div>СОДЕРЖМОЕ 4</div>
</div>
и подключаем к нему слайдер (этот код лучше разместить в секции head):
<script type="text/javascript">
$(document).ready(function(){
$('.my-slider').slick({
//setting
});
});
</script>
После таких несложных манипуляций ваш слайдер slick начнет работать с настройками по-умолчанию.
Вместо СОДЕРЖМОЕ 1, СОДЕРЖМОЕ 2 и других вы можете разместить любой контент - картинки, закголовки, параграфы и прочее. Например, для интернет магазина можно сделать ротатор товара:
<script type="text/javascript">
$(document).ready(function(){
$('.product-slider').slick({
//setting
});
});
</script>
<div class="product-slider">
<div>
<a href="/product/venik-plastikovui" title="Веник пластиковый">
<img src="/images/venik-plastikovui.jpg" alt="Веник пластиковый"/>
</a>
<h2>
<a href="/product/venik-plastikovui" title="Веник пластиковый">Веник пластиковый</a>
</h2>
</div>
<div>
<a href="/product/venik-iz-drevesinu" title="Веник из древесины">
<img src="/images/venik-iz-drevesinu.jpg" alt="Веник из древесины"/>
</a>
<h2>
<a href="/product/venik-plastikovui" title="Веник из древесины">Веник из древесины</a>
</h2>
</div>
</div>
Можно добавить неограниченное число элементов в ротатор.
Также слайдер поддерживает множество настроек - количество отображаемых элементов, количество прокручиваемых элементов, вертикальный или горизонтальный слайдер, скорость прокрутки и прочее.
Также можно настроить количество отображаемых элементов для различных разрешений дисплеев:
$(document).ready(function(){
$('.product-slider').slick({
responsive: [
{
breakpoint: 1024, // для дисплеев до 1024px и более
settings: {
slidesToShow: 3, // количество отображаемых элементов 3
slidesToScroll: 3, // количество прокручиваемых элементов за раз 3
dots: true // отображать точки (по количеству элементов)
}
},
{
breakpoint: 600, // для дисплее менее 600px
settings: {
slidesToShow: 2, // количество отображаемых элементов 2
slidesToScroll: 2 // количество прокручиваемых элементов за раз 2
}
},
{
breakpoint: 480, // для дисплее менее 480px
settings: {
slidesToShow: 1, // количество прокручиваемых элементов за раз 1
slidesToScroll: 1 // количество прокручиваемых элементов за раз 1
}
}
]
});
});
С более подробными настройками можно ознакомиться на странице слайдера. Там же можно скачать все исходники.