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

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

ОБСУЖДЕНИЕ

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

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

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

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

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

Kenburner слайдерKenburner слайдер

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

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

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

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

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

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

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

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

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

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

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

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

JourneyJourney

Шаблон Journey построенный на HTML5, в шаблоне имеется слайдер, стрелка вверх, табы, галерея, контактная форма с Google Maps....

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

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....
  • Текущий 2.82/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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