Адаптивная карусель для сайта Owl Carousel




Owl Carousel - jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).
Это очень удобны, простой и адаптивный плагин для создания слайдеров, каруселей и т.д
В этой статье я постараюсь объяснить и показать вам как он работает.

Официальный сайт проекта к сожалению не работает. Но я успел скачать этот замечательный плагин и готов с вами поделиться ;)

Установка плагина Owl Carousel
Для начала нам нужно скачать архив с плагином owl.carousel.zip

Ниже я покажу пример установки плагина в шаблон DataLife Engine.

После того как мы скачали архив, открываем его и распределяем файлы следующим образом:
Файл owl.carousel.css и owl.transitions.css помещаем в папку style ну или css.
Файл owl.carousel.js помещаем в папку js

Теперь нам необходимо эти файлы подключить для того чтобы они работали в нашем шаблоне.
Открываем файл main.tpl aперед строкой </head> вписываем следующие строки:
<link rel="stylesheet" href="/templates/FDv2/css/owl.carousel.css">
<link rel="stylesheet" href="/templates/FDv2/css/owl.transitions.css">
Папку css меняем на ту в которой у вас находятся css стили!
Затем в самом низу перед строкой </body> вписываем такую строку:
<script src="/templates/FDv2/js/owl.carousel.js"></script>
Ну вот и всё! С установкой мы закончили.

Теперь нам необходимо вставить и настроить сам слайдер.
Я покажу на примере topnews т.е выведу популярные новости через нашу owl карусель.

На странице с документацией описаны все параметры, демо, и способы использования нашего плагина Owl Carousel.
Переходим по ссылке и выбираем любой понравившийся слайдер.
Для наших topnews я выбрал самый первый с названием Images. Во вкладке javascript копируем эти строки:
</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, об этом я опубликую отдельную статью. Пользуйтесь на здоровье ;)

С уважением Mr.Stas.скачать dle 11.1смотреть фильмы бесплатно


карусель owl owl carousel
Комментариев 1
  1. Greet
    Давно искал! Хороший сайт 

Внимание!

Ознакомьтесь со статьёй по ссылке ниже.

Сайт мошенников
Информация