qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Навигация в виде слайдера JQuery плагин

JQuery плагин с навигацией в виде слайдера
Просмотров: 1854  Скачан: 245 раз  Комментариев в теме: 0

Навигация в виде слайдера а если быть точнее то это JQuery плагин Easy Paginate созданный для удобного оформления контента на сайте, он очень прост в установке. Плагин использует обычный пункт списка li, если пунктов больше трёх, выводится навигация в виде стрелок.

Шаг 1 - создание разметки

 

HTML

<div id="container">
    <ul id="items">
        <li>
            <p class="image">
                <a href="#"><img src="images/1.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 1</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/2.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 2</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/3.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 3</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/4.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 4</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/5.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 5</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/6.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 6</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/7.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 7</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/8.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 8</h3>
            <p class="info">Описание картинки</p>
        </li>   
        <li>
            <p class="image">
                <a href="#"><img src="images/9.jpg" alt="Template preview" /></a>
            </p>
            <h3>Картинка 9</h3>
            <p class="info">Описание картинки</p>
        </li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/paginate.js"></script>
<script type="text/javascript">
jQuery(function($){
    $('ul#items').easyPaginate({
        step:3
    });
});
</script> 
Материалы по теме:

Скроллер картинокСкроллер картинок

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

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

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....
Интересные публикации:

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.8/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить