Автор

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

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


 

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

 

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

 

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

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

});

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Вторичная панель содержимого, которая складывается плотно, поддерживается CSS-преобразованиями и jQuery.


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

Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.


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

Минимальная и отзывчивая форма информационного бюллетеня с добавлением некоторых тонких анимаций CSS3, чтобы обогатить пользовательский опыт.


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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close