Owl-carusel - вывод Популярных новосей

Реализация популярнх новостей (topnews.tpl) в DataLife Engine, при помощи дополнительного поля (функции из коробки DLE) и owl-carousel.js. архив с готовым примером для скачивания.

Если Вы используете дополнительное поле с типом поля (загружаемое изображение), для отображения картинки краткой новости. Конечно есть второй способ реализации Топ новостей и без доп поля, но с помощью стандартного тега {image-x} для шаблона topnews.tpl

Внимание! По данному тегу читайте документацию.
Если Вы будете использовать тег {image-x}, тогда необходимо в Вашем шаблоне, поменять тег доп поля на тег {image-x}.



Зайдите в админ панель DLE → настройки скрипта → дополнительные поля новостей и добавить новое дополнительное поле, с типом поля загружаемое изображение. В название поля указать идентификатор — например: image. С остальными полями это уже на усмотрение Вашего проекта.

Далее скачайте Owl-carousel.js с официального сайта. Из архива Вам необходимо взять всего 2 файла — owl.carousel.min.js и owl.carousel.min.css. Закиньте эти файлы в свои папки js и css Вашего шаблона.

Откройте в текстовом редакторе файл main.tpl и вставьте следующие строки:

<link rel="stylesheet" type="text/css" href="{THEME}/css/owl.carousel.min.css">
&lt;script type="text/jаvascript" src="{THEME}/js/owl.carousel.min.js"></script>

В этом же файле, в нужном месте:

<div id="carousel" class="owl-carousel owl-theme">
    {topnews}
</div>

Откройте в текстовом редакторе файл topnews.tpl и вставьте следующие строки:

<a href="{link}">
    <div class="image" style="background-image: url('[xfvalue_image_url_post_img][xfnotgiven_post_img]{THEME}/dleimages/no_image.jpg[/xfnotgiven_post_img]')"></div>
    <div class="owl-title">
        {t.i.t.l.e} <!-- Уберите в теге точки -->
    </div>
    <div class="owl-date">
        {date=d.m.Y}
    </div>
</a>

Откройте в текстовом редакторе файл, в моем случае это main.css и вставьте следующие строки:

/* --- CAROUSEL---*/
.owl-carousel {
 margin: 5px 0 5px 0;
}
.owl-carousel .owl-item {
 overflow: hidden;
 margin: 0;
 background: #000;
 -webkit-transition: background 0.4s, -webkit-transform 0.4s;
 -moz-transition: background 0.4s, -moz-transform 0.4s;
 -ms-transition: background 0.4s, -ms-transform 0.4s;
 -o-transition: background 0.4s, -o-transform 0.4s;
    transition: background 0.4s, transform 0.4s;
}
.owl-carousel .owl-item:hover {
    background: #606060;
}
.owl-carousel .owl-item .image {
 padding-top: 75%;
 background-position: center;
 background-size: cover;
 opacity: 0.6;
 -webkit-transition: 0.4s ease-in-out;
 -moz-transition: 0.4s ease-in-out;
 -ms-transition: 0.4s ease-in-out;
 -o-transition: 0.4s ease-in-out;
 transition: 0.4s ease-in-out;
 -webkit-transition: opacity 1s, -webkit-transform 1s;
 -moz-transition: opacity 1s, -moz-transform 1s;
 -ms-transition: opacity 1s, -ms-transform 1s;
 -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s;
}
.owl-carousel .owl-item:hover .image {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
.owl-carousel .owl-dots {
 display: block;
 width: 100%;
 height: 35px;
 text-align: center;
}
.owl-carousel .owl-dot {
 display: inline-block;
 width: 40px;
 height: auto;
 margin-right: 7px;
 padding: 15px 0;
 cursor: pointer;
}
.owl-carousel .owl-dot:last-child {
 margin-right: 0;
}
.owl-carousel .owl-dot span {
 display: block;
 width: 40px;
 height: 5px;
 background: #aaa;
}
.owl-carousel .owl-dot.active span {
 background: #FFD505;
}
.owl-carousel .owl-title {
 display: inline-block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 94%;
 height: 30%;
 margin: -15% 0 0 -47%;
 font-size: 13px;
 line-height: 1.6;
 font-weight: 400;
 letter-spacing: 1px;
    text-align: center;
 color: #fff;
}
.owl-carousel .owl-date {
 position: absolute;
 bottom: 10px;
 right: 10px;
 font-size: 12px;
 line-height: 12px;
 text-align: right;
 color: #fff;
}
/* --- /CAROUSEL---*/

Откройте в текстовом редакторе файл, в моем случае это main.js и вставьте следующие строки:

$('#carousel').owlCarousel({
 dots:true,
 rewind:true,
 loop:false,
 margin:5,
 nav:false,
 autoplay:true,
 autoplayTimeout:3000,
 autoplayHoverPause:true,
 responsive:{
 0:{
 items:1
 },
 480:{
 items:2
 },
 992:{
 items:3
 },
 1280:{
 items:4
 }
 }
 });

В настройках скрипта необходимо выставить, какое одновременно количество новостей показывать при разных размерах экрана. Настройки выставляются в зависимости от структуры Вашего шаблона.В моем случае, как Вы видите, от 0 до 480 px я вывожу один блок, а от 480 px до 992 px 2 блока и т.д. Более детальные настройки по карусели, читайте на официальном сайте owl-carousel.