Chop Slider 2 — лучший jQuery-слайдер

Добрый день. Несколько дней назад появилась необходимость использовать слайд-шоу на своём сайте, но оно должно было быть нестандартным, чтоб привлекало внимание пользователей, искал в течение дня и ничего нормального не мог найти, были более менее подходящие «слайдеры», но душа хотела клубнички, после того как я облазил весь рунет, переключился на «забугорных» друзей и… удача! Забегая наперёд хочу сказать: этот обзор сделан потому что в рунете нет никакого упоминания про это слайд-шоу, отсюда и логика.

Chop Slider 2

Chop Slider включает в себя 152 эффекта (перехода), из которых:

• 105 2D эффекта — работает во всех браузерах, включая динозавроподбного IE, но, как пишут разработчики, что там переходы выглядят немного по-другому, но я бы так не сказал, поддержка IE, но в 6,7 оно вообще не смотриться, в 8-ом — не очень, в 9 — более менее
• 37 3D эффекта — эти эффекты только для Chrome (Windows Vista+, Mac OSX), Safari (Windows XP+, Mac OSX, iOS)
• 5 «Mobile» эффектов — для мобильных браузеров
• 5 «No CSS3» — для браузеров, которые не поддеживают CSS3 — IE6-9

В тоже время все переходы поделены на такие группы:

• 2D Vertical (23)
• 2D Horizontal (21)
• 2D Multi (24)
• 2D Half-Transitions (27)
• 2D «Sexy» (10)
• 3D Blocks (16)
• 3D Flips (21)

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

Первым делом подключаем библиотеки

html-код:

CSS-код

#slide-prev {
/* Любые стили для кнопки назад */
}
#slide-next {
/* Любые стили для кнопки вперёд */
}
#slider {
/* Установка width, height и position:relative */
width:900px;
height:300px;
position:relative;
}
/* Каждый слайд по умолочанию должен быть скрыт */
.slide { display:none; }
/*
И только «cs-activeSlide» должен быть видимым
*/
.slide.activeSlide { display:block; }
/* Контейрен с текстом заголовка, должен быть скрыт */
.slide-descriptions {
display:none;
}
/* Заголовок должен быть скрыт по умолчанию */
.caption {
/* Любые стили для заголовка */
}
/* Контейнер с навигацией слайдов*/
.pagination {
/* Стили для навигации */
}
.slider-pagination {
/* Стили для кнопок навигации */
}
/* Это стили для активной кнопки навигации */
.cs-active-pagination {
/* Различные стили для этой кнопки */
}

Java Script-код

jQuery(function(){
$("#slider").chopSlider({
/* Slide Element */
slide: ".slide",
/* Controlers */
nextTrigger: «a#slide-next»,
prevTrigger: «a#slide-prev»,
hideTriggers: true,
sliderPagination: ".slider-pagination",
/* Captions */
useCaptions: true,
everyCaptionIn: ".sl-descr",
showCaptionIn: ".caption",
captionTransform: «scale(0) translate(-600px,0px) rotate(45deg)»,
/* Autoplay */
autoplay: true,
autoplayDelay: 6000,
/* Default Parameters */
defaultParameters: {
type: «vertical»,
xOffset: -100,
yOffset: 20,
hPieces: 10,
vPieces: 20,
rotate: 10,
rotateSymmetric: false,
scaleX:0.5,
scaleY:-0.5,
translateX:10,
translateY:10,
ease1:«ease»,
ease2:«ease»,
origin:«center center»,
dur1: 1000,
dur2 :600,
dur3: 1000,
pieceDelay: 50,
xFadeDelay :0,
prevTransition: !{
rotate:-10,
xOffset:10,
startFrom:10
}
},
/* Для мобильный браузеров */
mobile: {
disableCSS3:true,
dur1:1200,
dur2:1200,
dur3:1200,

hPieces:4,
vPieces:4,
pieceDelay:120,
rotate:0,
yOffset:0,
scaleX:1,
scaleY:1
},
/* Для динозавроподобных браузеров */
noCSS3:{
dur1:1200,
dur2:1200,
dur3:1200,
hPieces:4,
vPieces:4,
pieceDelay:120,
xFadeDelay :200
},
onStart: function(){ /* Do Something*/ },
onEnd: function(){ /* Do Something*/ }
})
})

Все Java Script свойства разработчики описали в документации (ссылка внизу), так что проблем с настройкой анимации возникнуть не должно, на крайний случай можно вернуться к стоковой анимации, код которой я привёл. Все настройки описывать не имеет смысла, так как можно про них прочитать в документации, но несколько настроек я для полноты обзора напишу

Чтобы выбирать переходы, представленые на сайте, необходимо в код добавить данную строчку:
t2D:csTransitions['half']['3'], где 'half' — название перехода, 3 — номер перехода.
К примеру, я использую Chop Slider с такими настройками:

jQuery(function(){
$("#slider").chopSlider({
slide:".slide",
nextTrigger:"a#slide-next",
prevTrigger:"a#slide-prev",
hideTriggers:false,
sliderPagination:".slider-pagination",
hidePagination:false,
useCaptions:true,
everyCaptionIn:".sl-descr",
showCaptionIn:".caption",
hideCaptions:true,
t2D:csTransitions['half']['3'],
onStart: function(){ /* Do Something*/ },
onEnd: function(){ /* Do Something*/ }
})
})

Вертикальная анимация

Допустим, мы имеем слайд:

Назначаем параметру xOffset 50px, получаем такое:

Мы видим, что слайд стал порезанным на ленточки по вертикали. Установленное нами значение 50px означает, что теперь ширина полоски — 100px, то есть левая и правая граница равна 50px. Аналогично и с yOffset.
Теперь давайте установим параметру rotate 20 градусов и rotateSymmetric: true

Получили слайд, границы полоски которого повернуты на 10 едениц каждая, если поставить rotateSymmetric: false, получается такая картинка:

Давайте попробуем повернуть слайд на -10градусов, напишим rotate: -10:

xOffset: -100:

Здесь мы видим как полоски поменялись местами. Произошло это потому что мы установили xOffset равное значение ширины слайда, но с отрицательным знаком, поэтому такой эффект (послдение полоски стали первыми, первые — последними...)
Также не стоит устаналивать scaleX: 0.5, потому что полоски будут иметь половиный вид:

Вертикальная 3D анимация

rotateZ=40, xOffset:100

rotateMid=-30, xOffset:100

rotateMid=-30, rotate=-10, rotateZ=0, rotateSymmetric:true, xOffset:100

rotateMid=-30, rotate=-10, rotateZ=0, rotateSymmetric:false, xOffset:100

Горизонтальная 3D анимация

rotateZ=10

rotateZ=0, rotateMid=-30

rotateZ=0, rotateMid=-30, rotate=20, rotateSymmetric=false

rotateZ=0, rotateMid=-30, rotate=20, rotateSymmetric=true


Это только 30% из тех эффектов, которые имеются в Chop Slider 2. Chop Slider предлагается использовать в 3х модификация: Free, Pro, Extended. Разница в этих версиях лишь в том, что Pro и Extended можно использовать в качестве плагина для Wordpress, есть Full 3D Mode и тех. поддержка, а так больше Free-версия ничем не урезана. Цена платных версий от 12$ до 300$.
Ссылки:
www.idangero.us/cs/ — оф.сайт
www.idangero.us/cs/download/ — Chop Slider 2 (исходники и документация)
P.S. Почему-то хтмл-код не отображался, пришлось сделать скрин… Может так и должно быть — я не знаю.