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

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

ОБСУЖДЕНИЕ

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

JQuery плагин с навигацией в виде слайдера
Просмотров: 2001  Скачан: 252 раз  Комментариев в теме: 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> 
Материалы по теме:

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....
Интересные публикации:

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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