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

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

ОБСУЖДЕНИЕ

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

Слайдер карусель с миниатюрами
Просмотров: 17623  Скачан: 1036 раз  Комментариев в теме: 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

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

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

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

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

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

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

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

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

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....
Интересные публикации:

Оригинальное горизонтальное менюОригинальное горизонтальное меню

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

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

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

Magic BoxMagic Box

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......
  • Текущий 2.54/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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