Адаптивная карусель с поддержкой мобильных устройств owl.carousel.js
При создании сайта часто требуется сделать карусель товаров или баннеров. Причем хочется получить простой и понятный инструмент.
В статье я расскажу о простом слайдере на javascript, который достаточно просто подключить к сайту и легко настроить под свои нужды.
Чтобы установить карусель себе на сайт, скачайте архив с сайта guthub. В архиве нас интересует папка dist. Загрузите ее себе на сайт в папку assets и преименуйте, например, в owl-carousel.
После этого, добавьте себе на сайт в секцию head следующий код (плагин JQuery ):
<link rel="stylesheet" href="ПУТЬ_ДО_ASSETS_САЙТА/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="ПУТЬ_ДО_ASSETS_САЙТА/owl-carousel/assets/owl.theme.default.min.css">
<script src="ПУТЬ_ДО_ASSETS_САЙТА/owl-carousel/owl.carousel.min.js"></script>
Дальше разместите следующий HTML код в месте, где должна располагаться карусель:
<div class="owl-carousel">
<div>Первый элемент слайдера</div>
<div>Второй элемент слайдера</div>
<div>Третий элемент слайдера</div>
</div>
Подключение практически закончено. Далее следует вызвать функцию карусели. Разместите следующий код перед закрывающим тегом body:
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
// здесь опции плагина
});
});
</script>
Вот и все. Слайдер начал работать. Далее следует указать различные опции плагина. Подробнее об опциях вы можете найти на странице плагина ».