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

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

ОБСУЖДЕНИЕ

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

Слайдер на jQuery для сайта
Просмотров: 3769  Скачан: 324 раз  Комментариев в теме: 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> 
Материалы по теме:

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

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

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

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

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

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

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

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

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

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

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

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

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

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....
  • Текущий 1.75/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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