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

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

ОБСУЖДЕНИЕ

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

Слайдер карусель с миниатюрами
Просмотров: 18837  Скачан: 1112 раз  Комментариев в теме: 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 ({});
Материалы по теме:

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

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

Таблица тарифных плановТаблица тарифных планов

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

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

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

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

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

Cлайдер КарусельCлайдер Карусель

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

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

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

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

DeTube v1.3DeTube v1.3

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

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

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

TanyaCMS 1.0TanyaCMS 1.0

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

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

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content Slid...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....
  • Текущий 2.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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