[Горбушка]

Многие из Вас знаю о существовании в DLE тега {custom}, но почти никто его не использует, а зря. Сегодня я расскажу как с помощью этого тега и правки лишь шаблона сделать полноценный слайдер.

И так, первым делом определимся с тем, что нам понадобится. Нам нужен JS-код слайдера, шаблон 1 слайда, шаблон main.tpl и настройки для тега {custom}. Начнём по порядку.

Выбираем слайдер. Особых требований к нему нет, мне понравился smSlider. Сам JS-код слайдера и CSS к нему можно скачать с GitHub (link). Вставляется на сайт он очень просто, приступаем.

Для начала берём jquery.smslider.min.js из архива и загружаем в папку /templates/ШАБЛОН/js/, файл smslider.css в папку /templates/ШАБЛОН/style/. Картинку sm_arr.png заливаем в /templates/ШАБЛОН/images/. В шаблон main.tpl перед </head> добавляем:

Код HTML:

<link type="text/css" rel="stylesheet" href="{THEME}/style/smslider.css" /> <script type="text/javascript" src="{THEME}/js/jquery.smslider.min.js"></script>

В нужное место вставляем код:

Код HTML:

<div id="sm_slider"> <ul>
        {custom template="slide"}
    </ul> </div>

В конце шаблона main.tpl добавляем код, запускающий слайдер:

Код HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $('#sm_slider').smSlider()
    })
</script>

Теперь в smslider.css правим путь до картинки на ../images/ (Да, 2 точки, это не опечатка).

Отлично, слайдер установлен, но он не работает – у него нет ни единого слайда. Этим мы сейчас и займёмся. Создадим шаблон slide.tpl и запишем туда код:

Код HTML:

[image-1]<li><a href="{full-link}"><img src="{image-1}" alt="{title}" /></li>[/image-1]

Теперь поговорим о том, что мы сделали. В теге {custom} мы указали, что необходимо работать с шаблоном slide.tpl. Сам slide.tpl выводит 1 картинку из новости, если она существует, делая её ссылкой на новость.

Вот и всё. Никакие сложные изменения в движке не требуются. Вы так же можете добавить кэширование, вывод только из 1 категории и т.д. Можно поменять размер картинки (сейчас он явно слишком большой для сайта). Так же можно выводить краткий текст из статьи. Ничего сложного в этом нет.

Спасибо за внимание. Что у нас получилось можно посмотреть тут: Демо

Источник: http://gorbushka.name/blog/6-web/43-slider_in_DLE.html
Автор: Я, Горбушка
Версия ДЛЕ: 9.8
Демо: Демо
Цена: Бесплатно

[webrulez]

Было бы неплохо еслиб он еще сам перелистывал