Слайдер был придуман ради правильного оформления контента на сайте, тем самым скрывая и подчеркивая важную информацию на сайте, но если в слайдере достаточно много элементов, то перед вами непростое решение, а именно найти метод постраничного разбиения блоков, кроме этого нам все этого необходимо организовать в примечательный ротатор материала. Как вы уже, наверное, догадались, в данном уроке мы рассмотрим как все это можно реализовать у себя на сайте.
Также пример применения вы можете увидеть на нашем сайте, в окончании данной статьи - "Статьи по теме".
Мы будем использовать плагин easypaginate. Я рекомендую использовать неупорядоченный список, хотя плагин будет работать с любым типом разметки, который будет содержатся различные дочерние элементы. И так, приступим:
Шаг 1. HTML
Для начала нам необходимо подключить фреймворки, нам понадобится jQuery и соответственно сам плагин, размещаем библиотеки скриптов в шапке документа:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/easypaginate.js"></script>Далее нам необходимо создать саму разметку, кроме этого мы привяжем якорь и описание к самому изображению, это позволит придать слайдеру более организованную картину:
<li>
<p class="image"><a href="#"><img src="./01.jpg" alt="Template preview" /></a></p>
<h3>Изображение 01</h3>
<div class="info">Описание картинки</div>
</li>
<li>
<p class="image"><a href="#"><img src="./02.jpg" alt="Template preview" /></a></p>
<h3>Изображение 02</h3>
<div class="info">Описание картинки</div>
</li>
<li>
<p class="image"><a href="#"><img src="./03.jpg" alt="Template preview" /></a></p>
<h3>Изображение 03</h3>
<div class="info">Описание картинки</div>
</li>С разметкой мы закончили, полную картинку разметки можно просмотреть в исходниках, и так, переходим к следующему шагу.
Шаг 2. Вызов плагина
Так как мы используем плагин, его необходимо инициализировать в желаемой нами страницы, для этого необходимо разместить код вызова в необходимом месте документа:
jQuery(function($){
$('ul#items').easyPaginate({
step:3
});
});
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
