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

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

ОБСУЖДЕНИЕ

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

Слайдер на jQuery для сайта
Просмотров: 5225  Скачан: 446 раз  Комментариев в теме: 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Аккордеон на css3 и jquery

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

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

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

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

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

Navigation SlaiderNavigation Slaider

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

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

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

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

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

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

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

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

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

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

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

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

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

Rotator на css и jQueryRotator на css и jQuery

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

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....
  • Текущий 1.47/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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