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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

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

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

Navigation SlaiderNavigation Slaider

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

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

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

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

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

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

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

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

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

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......
  • Текущий 2.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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