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

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

ОБСУЖДЕНИЕ

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

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

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

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

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

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

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

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

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

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

Navigation SlaiderNavigation Slaider

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

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Rotator на css и jQueryRotator на css и jQuery

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

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....
  • Текущий 3.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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