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

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

ОБСУЖДЕНИЕ

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

KENBURNER слайдер
Просмотров: 4508  Скачан: 427 раз  Комментариев в теме: 0

Kenburner - это jquery плагин с помощью которого можно реализовать на сайте отличный слайдер. Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов. В данном слайдере есть возможность воспроизводить видео с таких источников как YouTube и Vimeo, задавать подписи и неограниченное число слайдов.

Jquery слайдер представлен в различных версиях (смотрите DEMO), так же слайдер отлично адаптирован к сенсорным устройствам, таких как смартфоны, планшеты и т.д.

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

 

HTML

<div class="demoholder">
    <div id="banner-example-1" class="dark">				
        <ul>								
            <li data-transition="fade" data-startalign="right,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,top" data-panduration="12" data-colortransition="4"><img alt="" src="images/slides/image1.jpg" data-bw="images/slides/image1_blur.jpg" data-thumb="images/thumbs/thumb1.jpg" data-thumb_bw="images/thumbs/thumb1_blur.jpg">
                <div  class="creative_layer">
                    <div class="caption_orange wipeleft" style="top:130px;left:50px;"><i>KENBURNER </i></div>	
                    <div class="caption_transparent wipedown" style="top:180px;left:50px;">The Ultimate Ken Burns Slider</div>
                    <div class="caption_white minicap wipeup" style="top:230px;left:260px"><i>Presented by</i> <a href="#"><b>ThemePunch</b></a></div>										
                </div>		
            </li>
            <li data-transition="slide" data-startalign="center,top" data-zoom="out" data-zoomfact="1.6" data-endAlign="left,bottom" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image2.jpg" data-bw="images/slides/image2_blur.jpg" data-thumb="images/thumbs/thumb2.jpg" data-thumb_bw="images/thumbs/thumb2_blur.jpg">													
                <div class="video_container">
                    <div class="video_kenburn_wrap">	
                        <iframe class="video_clip" src="http://player.vimeo.com/video/27243869?title=0&byline=0&portrait=0" width="569" height="320" ></iframe>
                        <h2>Vimeo Video</h2>
                        <p>Themepunch creates beautiful and elegant templates, themes and components that suit your clients needs.</p>
                        <p><strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.</p>
                        <a class="buttonlight" href="#">Visit Website</a>
                        <div class="close"></div>
                    </div>
                </div>	
                <div  class="creative_layer">
                    <div class="caption_blue wipeleft" style="top:120px;left:470px;">Vimeo Video</div>					
                    <div class="caption_black wiperight" style="top:120px;left:626px;">Support</div>
                    <div class="caption_transparent minicap wipeup" style="top:170px;left:626px;">Click the play button</div>									
                </div>
            </li>
            <li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,center" data-panduration="8" data-colortransition="4"><img alt="" src="images/slides/image3.jpg" data-bw="images/slides/image3_blur.jpg" data-thumb="images/thumbs/thumb3.jpg" data-thumb_bw="images/thumbs/thumb3_blur.jpg">
                <div  class="creative_layer">
                    <div class="caption_transparent wipedown" style="top:80px;left:50px;">Some of KenBurner's Options:</div>
                    <div class="caption_black smallcap wipeleft" style="top:130px;left:50px">Image And Thumbs Fully Resizable</div>	
                    <div class="caption_black smallcap wipeleft" style="top:164px;left:50px">Customizable Ken Burns Effect</div>
                    <div class="caption_black smallcap wipeleft" style="top:198px;left:50px">Freely Positionable and Stylable Captions</div>
                    <div class="caption_black smallcap wipeleft" style="top:232px;left:50px">High Browser Compatibility!</div>	
                </div>
            </li>					
            <li data-transition="fade" data-startalign="right,center" data-zoom="out" data-zoomfact="1.6" data-endAlign="left,center" data-panduration="11" data-colortransition="4"><img alt="" src="images/slides/image4.jpg" data-bw="images/slides/image4_blur.jpg" data-thumb="images/thumbs/thumb4.jpg" data-thumb_bw="images/thumbs/thumb4_blur.jpg">
                <div  class="creative_layer">
                    <div class="caption_orange wipeup" style="top:210px;left:100px;">Captions can be positioned freely</div>	
                    <div class="caption_transparent wipedown" style="top:210px;left:473px;"><a href="#">Example URL-link</a></div>											
                </div>
            </li>
            <li data-transition="fade" data-startalign="center,top" data-zoom="in" data-zoomfact="1.6" data-endAlign="center,bottom" data-panduration="12" data-colortransition="4"><img alt="" src="images/slides/image5.jpg" data-bw="images/slides/image5_blur.jpg" data-thumb="images/thumbs/thumb5.jpg" data-thumb_bw="images/thumbs/thumb5_blur.jpg">
                <div class="video_container">
                    <div class="video_kenburn_wrap">	
                        <iframe class="video_clip" src="http://www.youtube.com/embed/-BrDlrytgm8?hd=1&wmode=opaque&autohide=1&showinfo=0" height="320" width="569" ></iframe>
                        <h2>Youtube Video</h2>
                        <p>Themepunch creates beautiful and elegant templates, themes and components that suit your clients needs.</p>
                        <p><strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.</p>
                        <a class="buttonlight" href="#">More Info</a>
                        <div class="close"></div>
                    </div>
                </div>	
                <div  class="creative_layer">
                    <div class="caption_red wipeleft" style="top:140px;left:30px;"><a href="#">Youtube Video</a></div>					
                    <div class="caption_white wiperight" style="top:140px;left:205px;">Support</div>								
                </div>
            </li>
            <li data-transition="slide" data-startalign="center,center" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image6.jpg" data-bw="images/slides/image6_blur.jpg" data-thumb="images/thumbs/thumb6.jpg" data-thumb_bw="images/thumbs/thumb6_blur.jpg">
                <div  class="creative_layer">		
                    <div class="caption_black nobg largecap wipeleft" style="top:10px;left:400px;">Text with no background</div>		
                </div>
            </li>	
            <li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image7.jpg" data-bw="images/slides/image7_blur.jpg" data-thumb="images/thumbs/thumb7.jpg" data-thumb_bw="images/thumbs/thumb7_blur.jpg">
                <div  class="creative_layer"></div>
            </li>		
            <li data-transition="slide" data-startalign="right,top" data-zoom="out" data-zoomfact="1" data-endAlign="center,center" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image8.jpg" data-bw="images/slides/image8_blur.jpg" data-thumb="images/thumbs/thumb8.jpg" data-thumb_bw="images/thumbs/thumb8_blur.jpg">
                <div  class="creative_layer">		
                    <div class="caption_orange wipeleft" style="top:130px;left:50px;"><i>KENBURNER </i></div>	
                    <div class="caption_transparent wipedown" style="top:180px;left:50px;">Get It Now!</div>				
                </div>
            </li>					
        </ul>
    </div>
    <div class="selector">
        <div class="thumbbutton right tnone"><div class="grain">Отключить</div></div>
        <div class="seperator"></div>
        <div class="thumbbutton middle tbull"><div class="grain">Кнопки</div></div>
        <div class="seperator"></div>
        <div class="thumbbutton selected tthumb"><div class="grain">Иконки</div></div>
        <div class="seltext">Навигация</div>
    </div>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery_1.7.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.kenburn.min.js"></script>	
<script type="text/javascript">
$(document).ready(function() {
    $.noConflict();					 									
    jQuery('#banner-example-1').kenburn({										
        width:800,
        height:320,
        thumbWidth:120,
        thumbHeight:70,
        thumbAmount:6,							
        thumbSpaces:0,
        thumbPadding:9,
        thumbStyle:"both",
        bulletXOffset:0,
        bulletYOffset:-80,
        repairChromeBug:"on",
        shadow:'true',
        timerShow:"on",
        touchenabled:'on',
        pauseOnRollOverThumbs:'off',
        pauseOnRollOverMain:'on',
        preloadedSlides:10,							
        timer:10,
        googleFonts:'PT+Sans+Narrow:400,700',
        googleFontJS:'js/jquery.googlefonts.js'
    });
    jQuery('.tnone').click(function() {
        jQuery('.tbull').removeClass('selected');
        jQuery('.tthumb').removeClass('selected');
        jQuery('.tnone').addClass('selected');
        jQuery('.kenburn_thumb_container').css({'visibility':'hidden'});
        jQuery('.thumbbuttons').css({'visibility':'hidden'});
        jQuery('.bannershadow').cssAnimate({'margin-top':"100px"});
    });
    jQuery('.tthumb').click(function() {
        jQuery('.tbull').removeClass('selected');
        jQuery('.tthumb').addClass('selected');
        jQuery('.tnone').removeClass('selected');
        jQuery('.kenburn_thumb_container').css({'visibility':'visible'});
        jQuery('.thumbbuttons').css({'visibility':'hidden'});
        jQuery('.bannershadow').cssAnimate({'margin-top':"150px"});
    });
    jQuery('.tbull').click(function() {
        jQuery('.tbull').addClass('selected');
        jQuery('.tthumb').removeClass('selected');
        jQuery('.tnone').removeClass('selected');
        jQuery('.kenburn_thumb_container').css({'visibility':'hidden'});
        jQuery('.thumbbuttons').css({'visibility':'visible'});
        jQuery('.thumbbuttons').show(0);
        jQuery('.bannershadow').cssAnimate({'margin-top':"100px"});
    });
    jQuery('.tbull').click();
    jQuery('.thumbbuttons').hide(0);
});
</script>
Материалы по теме:

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

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

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

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

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

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

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

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

ZeniZeni

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

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

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

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

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....
  • Текущий 2.28/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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