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

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

ОБСУЖДЕНИЕ

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

Слайдер на css3 и jquery
Просмотров: 1868  Скачан: 271 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

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

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

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

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

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

Adams v1.2.0Adams v1.2.0

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

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

ElliotElliot

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

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

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....
  • Текущий 2.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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