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

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

ОБСУЖДЕНИЕ

Слайдер с миниатюрами

Слайдер карусель с миниатюрами
Просмотров: 16880  Скачан: 987 раз  Комментариев в теме: 0

Слайдер с миниатюрами, а если быть точнее, то это плагин Infinite Carousel который позволяет демонстрировать любое количество изображений и видео в бесконечной карусели, плагин может похвастаться плавными переходами и лёгким функционалом, на время написания этого поста его версия 3.0.3.

Возможности слайдера:

- Сам плагин весит 11кб в сжатом виде.

- Отображает изображение и видео (YouTube, Vimeo, и Funnyordie).

- Можно задавать подписи к изображению.

- Имеет круговой таймер.

- Возможность управлять с помощью клавиатуры.

- Функции обратного вызова.

- Можно использовать несколько слайдеров на одной странице.

- Плавные переходы, нет отставаний в браузере.

- Работает во всех современных браузерах.

- Использует плагин JQuery Easing.

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

 

HTML

<ul id="carousel">
    <li><img width="689" height="375" alt="" src="images/i/1.jpg" /><p>This image has both a caption and hyperlink. The next four images also also linked (but have no captions).</p></li>
    <li><img width="689" height="375" alt="" src="images/i/2.jpg" /><p>This image has both a caption and hyperlink. The next four images also also linked (but have no captions).</p></li>
    <li><img width="689" height="375" alt="" src="images/i/3.jpg" /><p>This image has both a caption and hyperlink. The next four images also also linked (but have no captions).</p></li>
    <li><img width="689" height="375" alt="" src="images/i/4.jpg" /><p>This image has both a caption and hyperlink. The next four images also also linked (but have no captions).</p></li>
    <li><img width="689" height="375" alt="" src="images/i/6.jpg" /><p>This image has both a caption and hyperlink. The next four images also also linked (but have no captions).</p></li>
    <li><iframe longdesc="images/i/7.jpg" width="689" height="375" src="http://www.youtube.com/embed/ZJPcLB4n1f8?feature=player_detailpage" frameborder="0"></iframe></li>
    <li><iframe longdesc="images/i/8.jpg" src="http://player.vimeo.com/video/72325961/" width="689" height="375" frameborder="0"></iframe></li>
</ul>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitecarousel3.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function(){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/',
            transitionSpeed:450,
            displayTime: 6000,
            internalThumbnails: false,
            thumbnailType: 'images',
            customClass: 'myCarousel',
            progressRingColorOpacity: '0,0,0,.9',
            progressRingBackgroundOn: true,
            easeLeft: 'easeOutExpo',
            easeRight:'easeOutQuad',
            inView: 1,
            advance: 1,
            autoPilot: true,
            prevNextInternal: true,
            autoHideCaptions: true
        });
    });
</script>

Опции:

transitionSpeed - скорость перехода слайда (в мс) (по умолчанию '800')
displayTime - время перехода слайда (в мс) (по умолчанию '6000')
displayProgressRing - круговой таймер расположеный в верхнем правом углу слайдера (по умолчанию 'включено')
progressRingColorOpacity - цвет и прозрачность кольца таймера (по умолчанию '0, 0,0, 0,5')
progressRingBackgroundOn - шкала времени в круговом таймере (по умолчанию 'включено')
progressRingBackgroundColorOpacity - цвет и прозрачность шкалы времени (по умолчанию '255, 255255, 0,5')
thumbnailType - формат миниатюр (по умолчанию 'None' возможные значения: кнопки ('buttons'), изображения ('images'), цыфры ('numbers'), количество ('count') )
easeLeft - эффект смягчения когда слайд движется влево (по умолчанию 'linear')
easeRight - эффект смягчения когда слайд движется вправо (по умолчанию 'linear') 
ImagePath - путь к изображению навигации (стелки, кнопка воспроизведения) и изображений используемых в слайде (по умолчанию '/images/') 
InView - количество слайдов, которые будут выведины для просмотра сразу (по умолчанию '1')
margin - отступ (по умолчанию '0')
advance - количество слайдов для листания, когда пользователь нажимает левую или правую кнопку навигации или в слайд-шоу (по умолчанию '1')
customClass - имя, класса, это имя будет начинаться с "ic_" (по умолчанию 'null') 
showControls - включение отключение кнопки  Play / Pause (по умолчанию 'включено') 
autoHideCaptions - включение отключение анимации появления подписей к изображению (по умолчанию 'отключено') 
autoPilot - включение слайд-шоу (по умолчанию 'отключено')
prevNextInternal - помещает стрелки навигации внутри или снаружи слайдера (по умолчанию 'включено') 
internalThumbnails - помещает миниатюры внутри или снаружи слайдера (по умолчанию 'отключено')
enableKeyboardNav - включает отключает использование клавиатуры (по умолчанию 'включено')

Функции обратного вызова

onSlideStart - по умолчанию функция () {}, 
onSlideEnd - по умолчанию функция () {}, 
onPauseClick - по умолчанию функция () {}, 
onPlayClick - по умолчанию функция () {}

Используемые классы CSS

. Ic_caption
. ic_button
. Ic_active
. ic_thumbnails

Создание экземпляров

. $ ('# id карусели').infiniteCarousel ({});
Материалы по теме:

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

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

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

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

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

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

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

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Контактная форма (дизайн)Контактная форма (дизайн)

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

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Вертикальное меню с прокруткойВертикальное меню с прокруткой

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

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......
  • Текущий 2.54/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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