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

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

ОБСУЖДЕНИЕ

Красивый слайдер на jQuery

Слайдер на jQuery для сайта
Просмотров: 4144  Скачан: 367 раз  Комментариев в теме: 0

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте. В слайдере предусмотрена навигационная панель, для переключения изображения (вправо, влево), также предусмотрено слайд-шоу с таймером в стиле карусель (картинки крутятся по кругу). При наведении курсора на слайдер, прокрутка контента останавливается, также есть возможность выводить в слайдере видео с таких источников как vimeo.com, youtube.com. В целом отличный jQuery слайдер для креативного проекта.

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

 

HTML

<div class="peKenBurns peNoJs" data-autopause="image" data-thumb="enabled" data-mode="kb" data-controls="always" data-shadow="enabled" data-logo="enabled">				 
    <div class="peKb_active" data-delay="5" data-thumb="img/thumbs/kb_01.jpg">
        <img src="img/kb_01.jpg" alt="Banner Image 1" />
        <h1>СОВРЕМЕННЫЙ СЛАЙДЕР, СТИЛЬНАЯ ПАНЕЛЬ НАВИГАЦИИ, КРАСИВЫЙ ДИЗАЙН</h1>
    </div>
    <div data-delay="5" data-thumb="img/thumbs/kb_00.jpg">
        <a class="video hd autoplay loop skiptonext" href=""><img src="img/blank.png" data-src="img/kb_00.jpg" alt="Banner Image 1" /></a>
        <h1>ВОЗМОЖНОСТЬ ВОСПРОИЗВОДИТЬ ВИДЕО С VIMEO</h1>
    </div>
    <div data-delay="5" data-thumb="img/thumbs/kb_02.jpg">
        <img src="img/blank.png" data-src="img/kb_02.jpg" alt="Banner Image 1" />
        <h1>КРАСИВЫЙ ЭФФЕКТ СЛАЙДШОУ</h1>
    </div>
    <div data-delay="5" data-thumb="img/thumbs/kb_03.jpg">
        <img src="img/blank.png" data-src="img/kb_03.jpg" alt="Banner Image 1" />
        <h1>В СЛАЙДЕРЕ ИСПОЛЬЗУЕТСЯ ОЖИВЛЁННЫЙ ТАЙМЕР</h1>
    </div>
    <div data-delay="5" data-thumb="img/thumbs/kb_04.jpg">
        <a class="video hd autoplay loop skiptonext" href=""><img src="img/blank.png" data-src="img/kb_04.jpg" alt="Banner Image 1" /></a>
        <h1>ВОЗМОЖНОСТЬ ВОСПРОИЗВОДИТЬ ВИДЕО С YOUTUBE</h1>
    </div>
    <div data-delay="5" data-thumb="img/thumbs/kb_05.jpg">
        <img src="img/blank.png" data-src="img/kb_05.jpg" alt="Banner Image 1" />
        <h1>ОТЛИЧНОЕ РЕШЕНИЕ ДЛЯ РЕАКТИВНЫХ ПРОЕКТОВ</h1>
    </div>
    <div data-delay="5" data-thumb="img/thumbs/kb_06.jpg">
        <img src="img/blank.png" data-src="img/kb_06.jpg" alt="Banner Image 1" />
        <h1>ОТЛИЧНЫЙ СЛАЙДЕР ДЛЯ ВЫВОДА ИЗОБРАЖЕНИЙ</h1>
    </div>				 
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/kenburnsSlider.min.js"></script>
<script type="text/javascript">
	jQuery(function($){
		$(".peKenBurns").peKenburnsSlider({externalFont:true})
	})
	jQuery(window).load(function() {
		$(".peKenBurns").each(function() {
			$(this).data("peKenburnsSlider").fontsLoaded()
		})
	})		
</script> 
Материалы по теме:

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

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

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

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

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

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

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

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

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

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....
Интересные публикации:

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Kenburner слайдерKenburner слайдер v1.1

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

JQuery ползунокJQuery ползунок

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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