stip 23 ноя 2011 в 01:27

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

5 мин

54K

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

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)

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

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

<script src="scripts/jquery-1.7.min.js"></script>
<script src="scripts/jquery.id.chopslider-2.0.5.free.min.js"></script>
<script src="scripts/jquery.id.cstransitions-1.0.min.js"></script>
<script src="scripts/our-settings.js"></script>

html-код:


<a id="slide-next" href="#"></a> 
<a id="slide-prev" href="#"></a>
<div id="slider">
  <div class="slide cs-activeSlide"> <img src="1.jpg" /> </div>
  <!-- Слайды с ссылками -->
  <div class="slide"> <a href="http://www.idangero.us"><img src="2.jpg" /></a> </
div>
  <div class="slide"> <img src="3.jpg" /> </div>
</div>
<!-- Если вы хотите использовать заголовки слайдов -->
<div class="slide-captions">
  <div class="sl-descr">
    <!-- Вы можете использовать любой html-контент здесь-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="sl-descr">
    <p>Caption text for second slide</p>
  </div>
  <!-- Без заголовка-->
  <div class="sl-descr"></div>
</div>
<div class="caption"></div>
<!-- Нумерация страниц -->
<div class="pagination"> 
  <span class="slider-pagination"></span> 
  <span class="slider-pagination"></span>
  <span class="slider-pagination"></span>
</div>

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 (исходники и документация)

Теги:

Хабы:

jQuery