Слайдер с использованием плагина jQuery Chop Slider

В данном уроке мы сделаем слайдер  с помощью плагина jQuery Chop. Данный плагин предоставляет возможность использовать 200 различных эффектов для оформления переходов между слайдами. Эффекты формируются и в 2D и в 3D пространстве. Также имеются несколько эффектов без использования CSS3  (для старых браузеров) и пять эффектов для браузеров мобильных устройств.Также можно создавать свои собственные трансформации (если есть желание).

 

Разметка HTML

Каждый слайд помещается в контейнер с классом  ‘slide’. Обратите внимание на то, что нужно создать такое же количество элементов для навигации по слайдам, для описаний и заголовков.

           <div class="wrapper">
              <div class="s-shadow-b"></div>
              <a id="slide-next" href="#"></a> 
              <a id="slide-prev" href="#"></a>
              <div id="slider">
                <div class="slide cs-activeSlide"> <img src="/slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div>
                <div class="slide"> <img src="/slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div>
                <div class="slide"> <img src="/slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div>
                <div class="slide"> <img src="/slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div>
                <div class="slide"> <img src="/slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div>
                <div class="slide"> <img src="/slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div>
                <div class="slide"> <img src="/slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div>
              </div>
              <div class="pagination"> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
              </div>
              <div class="slide-descriptions">
                <div class="sl-descr">Таиланд, много разных банкоматов ATM в одном месте</div>
                <div class="sl-descr">Все цвета города яркие, темных нет</div>
                <div class="sl-descr">Рынок на воде. Шоппинг на плаву</div>
                <div class="sl-descr">Закат на острове Ко Панган</div>
                <div class="sl-descr">Перед закатом</div>
                <div class="sl-descr">Скульптуры бога на острове Ко Самуи</div>
                <div class="sl-descr">Изящная барменша</div>
              </div>
              <div class="caption"></div>
            </div>

 

CSS

.wrapper {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:960px;
	height:300px;
	display:block;
	padding-top:150px;
	padding-bottom:120px;
	background:url(../images/podium.png) no-repeat bottom;
	z-index:2;
}
.wrapper2 {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	width:960px;
	height:300px;
	display:block;
	z-index:2;
	text-align:center;
	padding-bottom:50px;
}
.wrapper2 a {
	display:inline-block;
	padding:0px 5px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	text-decoration:none;
	margin:0px 5px;	
}
.wrapper2 .active-transition {
	background:#222;
	color:#fff;	
}
/*---------- Слайдер ----------- */

/*---------- Левый и правый триггер ----------- */
#slide-prev {
	position:absolute;
	width:21px;
	height:33px;
	bottom:39px;
	left:26px;
	z-index:4;
	background:url(../images/sl-control.png) left top no-repeat;
}
#slide-next {
	position:absolute;
	width:21px;
	height:33px;
	bottom:39px;
	right:26px;
	z-index:4;
	background:url(../images/sl-control.png) left bottom no-repeat;
}

/*---------- Тень ----------- */
.s-shadow-b{
	background:url(../images/shadow.png) no-repeat top;
	width:876px;
	height:55px;
	position:absolute;
	left:42px;
	bottom:60px;
	z-index:1;
}
/*---------- Основной контейнер слайдера ----------- */
#slider {
	width:900px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:2;
	display:block;
}
/* Каждый слайд скрыт по умолчанию */
.slide { display:none; }

/* 
   Видимым является только слайд с классом "cs-activeSlide"!
   !Зарезервированное имя. Необходимый класс! 
*/
.cs-activeSlide { display:block; }

/* Контейнер с текстом описания. Должен быть скрыт. */
.slide-descriptions {
	display:none;
}

/* Контейнер с заголовком. Должен быть скрыт по умолчанию. */
.caption {
	background: url("../images/d-bg.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: none;
    height: 280px;
    padding: 20px;
    position: absolute;
    right: 40px;
    top: 140px;
    width: 180px;
    z-index: 3;
}
.full-3D {
	right: 40px;
    top: 580px;
    width: 840px;
	height:20px;
}
/* Контейнер для кнопок навигации */
.pagination {
	bottom: 50px;
    left: 345px;
    margin-top: 50px;
    position: absolute;
    text-align: center;
}
.slider-pagination {
	display:inline-block;
	width:15px;
	height:10px;
	background:url(../images/navi.png) no-repeat left bottom;
	margin:0 10px;
	cursor:pointer;
	position:relative;
	z-index:200;
}
/* Необходимый класс для активной кнопки. ! Зарезервированное имя ! */
.cs-active-pagination {
	background:url(../images/navi.png) no-repeat left top;
}

/* Слайдеры */
.slider-2 {
	padding-top:0;
	margin-top:20px;
}
#slider-1, #slider-2 {
	width:900px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:2;
	display:block;
}
.cs-activeSlide-2 {
	display:block
}
.cs-active-pagination-2 {
	background:url(../images/navi.png) no-repeat left top;
}

 

JavaScript

Плагин нужно инициализировать:

jQuery(function(){
    $("#slider").chopSlider({
        /* Элемент слайда */
        slide : ".slide",
        /* Управление */
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        /* Заголовки */
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        /* Автопроигрывание */
        autoplay : true,
        autoplayDelay : 5000,
        /* Для барузеров, которые поддерживают трансформации 3D */
        t3D : csTransitions['3DFlips']['random'], /* Все будет выбираться случайным образом */
        t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})

Здесь устанавливается случайный выбор эффекта перехода, включается автопроигрывание и вывод заголовков.

На сайте плагина можно найти полное описание плагина и примерами кода (к сожалению, на английском языке).


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Xz9JQyIasXw/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Слайдер с использованием плагина jQuery Chop Slider | | 2012-06-19 11:57:43 | | Статьи Web-мастеру | | В данном уроке мы сделаем слайдер  с помощью плагина jQuery Chop. Данный плагин предоставляет возможность использовать 200 различных эффектов для оформления переходов между слайдами. Эффекты | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: