Разбиение блоков в виде слайдера Разбиение блоков в виде слайдера

 

Слайдер был придуман ради правильного оформления контента на сайте, тем самым скрывая и подчеркивая важную информацию на сайте, но если в слайдере достаточно много элементов, то перед вами непростое решение, а именно найти метод постраничного разбиения блоков, кроме этого нам все этого необходимо организовать в примечательный ротатор материала. Как вы уже, наверное, догадались, в данном уроке мы рассмотрим как все это можно реализовать у себя на сайте.

 

ДЕМО
ИСХОДНИКИ

 

Также пример применения вы можете увидеть на нашем сайте, в окончании данной статьи - "Статьи по теме".

Мы будем использовать плагин 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
 });

});

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!