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

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

ОБСУЖДЕНИЕ

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

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

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

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

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

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

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...
Интересные публикации:

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

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

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content Slid...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...

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

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

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......
  • Текущий 2.64/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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