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

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

ОБСУЖДЕНИЕ

Слайдер с навигацией

Слайдер на css3 и jquery
Просмотров: 1904  Скачан: 276 раз  Комментариев в теме: 1

Очень красивый слайдер с мини навигацией внизу реализованный на css3 и jquery. В навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), но самая интересная фишка этого слайдера, это преобразования стрелки (влево, вправо), если коротко, то при наведении курсора на стрелку, происходит красивая анимация, в замен стрелки, появляется округлённая картинка (которая идёт следующей по списку и на которую вы перейдёте при клике по ней) выглядит здорово.

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

 

HTML

<div class="container">
    <div class="wrapper">
        <div id="cn-slideshow" class="cn-slideshow">
            <div class="cn-images">
                <img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
                <img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/>
                <img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/>
                <img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/>
            </div>
        </div>
    </div>
</div>
<script id="barTmpl" type="text/x-jquery-tmpl">
<div class="cn-bar">
    <div class="cn-nav">
        <a href="#" class="cn-nav-prev">
            <span>Previous</span>
            <div style="background-image:url(${prevSource});"></div> 
        </a>
        <a href="#" class="cn-nav-next">
            <span>Next</span>
            <div style="background-image:url(${nextSource});"></div>
        </a>
    </div>
    <div class="cn-nav-content">
        <div class="cn-nav-content-prev">
            <span>Previous</span>
            <h3>${prevTitle}</h3>
        </div>
        <div class="cn-nav-content-current">
            <span>Currently viewing</span>
            <h2>${currentTitle}</h2>
        </div>
        <div class="cn-nav-content-next">
            <span>Next</span>
            <h3>${nextTitle}</h3>
        </div>
    </div>
</div>
<script>

Шаг 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/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.slideshow.js"></script>
Материалы по теме:

Kenburner слайдерKenburner слайдер

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

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

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

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

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

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

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

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

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

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

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

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

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

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

JQuery ползунокJQuery ползунок

Красивый горизонтальный JQuery ползунок (Slider) для сайта, реализованный с помощью JQuery....

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....
  • Текущий 1.91/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (1)
↑ +2 ↓
Явер
Класный слайдер, жаль, что не адаптивный.
Ответить Ответ с цитатой

Страницы: 1

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


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