RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

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

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

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

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...
Интересные публикации:

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимися ико...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

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

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

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

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

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......
  • Текущий 2.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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