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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

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

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

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

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

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...

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

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

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....
  • Текущий 2.77/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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