Автор

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

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


 

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

 

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

 

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

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

});

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В данном уроке мы сделаем стильный и анимированный индикатор прогресса с помощью правил CSS3. Все выглядит достаточно эффектно и будет радовать взор посетителей во время загрузки. Вот как это будет выглядеть..


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

Библиотека анимационных эффектов перехода, основанная на анимации CSS.


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

Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией CSS и поддержкой устройств с отключенным javascript.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close