RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

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

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

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

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

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

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

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

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

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

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Красивые кнопки на css3Красивые кнопки на css3

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

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

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

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

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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