Автор

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

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


 

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

 

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

 

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

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

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

Если вы ищете, как создать активную диаграмму (или схемы) с информацией - эта новая статья для вас. Я просматривал в Интернете, и нашел одно хорошее и серьезное решение, - Highcharts библиотека. Это чистая javascript библиотека, которая предлагает интерактивные и интуитивно понятные графики. Эта библиотека поддерживает различные возможные графики: площадь, линии, сплайн, areaspline, пирог, колонны и другие. Я думаю, что это лучший способ, чтобы получить информацию для зрителей. Сегодня в демо я подготовил несколько примеров с разными графиками.


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

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


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

Это интро-страница, ориентированная на фоновое изображение полной ширины и жирное анимированное меню. И для браузеров, которые его поддерживают, хороший внешний вид, похожий на iOS, за навигацию.


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

Таблица цен, которая анимируется в форме покупки, когда пользователь выбирает нужную услугу.


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close