Owl Carousel - jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).
Это очень удобны, простой и адаптивный плагин для создания слайдеров, каруселей и т.д
В этой статье я постараюсь объяснить и показать вам как он работает.
Официальный сайт проекта к сожалению не работает. Но я успел скачать этот замечательный плагин и готов с вами поделиться ;)
Установка плагина Owl Carousel
Для начала нам нужно скачать архив с плагином
После того как мы скачали архив, открываем его и распределяем файлы следующим образом:
Файл owl.carousel.css и owl.transitions.css помещаем в папку style ну или css.
Файл owl.carousel.js помещаем в папку js
Теперь нам необходимо эти файлы подключить для того чтобы они работали в нашем шаблоне.
Открываем файл main.tpl aперед строкой </head> вписываем следующие строки:
<link rel="stylesheet" href="{THEME}/css/owl.carousel.css">
<link rel="stylesheet" href="{THEME}/css/owl.transitions.css">Папку css меняем на ту в которой у вас находятся css стили!
Затем в самом низу перед строкой </body> вписываем такую строку:
<script src="{THEME}/js/owl.carousel.js"></script>Ну вот и всё! С установкой мы закончили.
Теперь нам необходимо вставить и настроить сам слайдер.
Я покажу на примере topnews т.е выведу популярные новости через нашу owl карусель.
На странице с документацией описаны все параметры, демо, и способы использования нашего плагина Owl Carousel.
Переходим по ссылке и выбираем любой понравившийся слайдер.
Для наших topnews я выбрал самый первый с названием Images. Во вкладке jаvascript копируем эти строки:
</script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</script>и вставляем их в файле main.tpl перед строкой </body>
Затем во вкладке CSS копируем строки:
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}и подключаем их в любой css файл либо в файл main.tpl перед строкой <body> но после строки </head>!
Теперь мы разберем наш HTML код и подключим к topnews. В файле main.tpl в нужное место вставляем тег {topnews} который в свою очередь выводит список популярных новостей, внешний вид которых можно настроить в файле topenews.tpl, об этом чуть ниже.
Наш код с тегом должен выглядеть вот так:
<div id="owl-demo">
{topnews}
</div>Ну и теперь нам осталось настроить сами новости.
Открываем файл topnews.tpl и в самое начало вписываем:
<div class="item">в самом конце закрываем атрибут </div>
Если вы пользуетесь одним из моих шаблонов с Bootstrap то как вариант можно использовать следующие строки в файле topnews.tpl:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="{image-1}" style="width:100%; height:160px;object-fit: cover;">
<div class="caption">
<h3><a href="{link}">{title limit="55"}</a></h3>
<p>{text limit="100"}</p>
<p><a href="{link}" class="btn btn-primary" role="button">Читать</a>
</div>
</div>
</div>
</div>Новости будут выводится в таком виде
Этот плагин можно использовать практически в любом месте, так же и с использованием тега {custom category}
Им же можно заменить и стандартную галерею DLE, об этом я опубликую отдельную статью. Пользуйтесь на здоровье ;)
С уважением admin.