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)


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

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


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

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 49

    +27
    Выглядит необычно! Но зачем?

    Такими темпами мы вернемся к мигающим гифкам на главной.
      –2
      мне понравилось.
      На оф. сайте есть просмотр: нужно кликнуть по номеру, а потом нажать следующий слайд, так же меняем и тип эффектов.

      Насчет применения, к реальному проекту прикрутить можно. В центральную область для слайдов, включить 3Д смену кадра, когда куб перекатывается например, выглядит действительно свежо и круто
        +2
        Вообще то выглядит сногсшибательно, хоть и тормозит. А «мигающие гифки» делают безвкусные люди равнодушные люди.
          0
          Тормозить может на оф сайте, когда вы поставите себе на сайт, то будет летать. Они используют 152 перехода из которых 37 3D перехода, скорее всего они и нагружают браузер. У меня на прописан 1 эффект, код которого я привёл в статье работает «на ура!».
            0
            Опера 12.00 alpha, Mozilla Firefox 7.01, Google Chrome 15: тормозов не наблюдаю.
          0
          На скриншотах в статье это выглядит как баяны в различных состояниях, особенно если плавно прокручивать сверху вниз :)
          +15
          Очень круто, но к реальному проекту, этот плагин я бы подключать не стал.
            0
            Согласен. Плагин красивый, но мне старый добрый Cycle как-то родней.
              0
              Мне Cycle никогда не нравился. К нему и easing нужен и иногда и easing-compability да и сам он много весит и тянет за собой кучу всего… а толку.
                0
                Пожатая фулл версия 26КБ, лайт 4КБ.
                Easing нужен далеко не всегда, и весит он 4КБ, вместе с compability. Лично я его крайне редко использую.

                Нужен только jQuery, который практически всегда уже подключен.

                Максимум это 30КБ, без gzip'а. Т.е. намного меньше, чем практически любая картинка.
                  0
                  Mobilyslider(ссылка ниже) пережатый весит 3.8 кб. И ему не нужны easing итд. Другое дело если easing нужен каким-то другим плагинам и его по-любому придется подключать. Ну собственно кто к чему привык. я написал лишь мое имхо что мне не нравится Cycle. Я перепеисал под себя этот Mobilyslider и весить он стал меньше и иметь функционал нужный только мне.
                    0
                    Тут я полностью согласен, написанное под себя всегда намного удобней.
                      0
                      Забыл упомянуть что 3.8кб это Closure компилером пережатый. а с gzip — 1.2 кб.
                      0
                      Хороший плагин, но там про лицензию ничего не написано :) Не подскажите под какой он распространяется?
              +22
              Самый расфуфыренный — может быть. Лучший — точно нет.
                +4
                Забавно, из-под Chromium 14 демо выдаёт «Sorry! Your browser do not support 3D Transforms. Try Chrome or Safari»
                  +1
                  Тут эффекты получаются важнее самой информации.
                    +2
                    Нужно еще отметить, что есть как платная так и бесплатная версия, при этом бесплатная версия идет под какой-то не очень удобной лицензией.
                      +1
                      Чукча не читатель… но лицензия все-таки неудобная
                        +2
                        Usage In Projects/Products For Sale для Free невозможно. Действительно лицензия неочень.
                      +1
                      Круто, но не понятно где его применять, с такими эффектами.
                        0
                        FF 9.0 не поддерживает 3D-эффекты?
                          +2
                          Тут все чисто CSS3 iamceege.com/pure-css3-content-slider/
                          а сам пользуюсь переделанным playground.mobily.pl/jquery/mobily-slider/demo.html
                          и вот еще делал: jsfiddle.net/MechanisM/UBKJw/
                            +1
                            слишком много кода в слайдере представленном в топике.
                            0
                            Хороший слайдер, спасибо за статью, буду использовать его в текущем проекте
                              0
                              Эффекты красивые, но в опервых он платный, в овторых если делать, так делать, мне кажется для платного продукты упустили много деталей в частности «В МИРЕ НЕ ОДНИХ ХРОМ 15+» ибо в опере жуткие томоза, в ie тоже, фф послеждней версии тоже не поддерживается половиной эффектов!

                              Можно же было придумать грейсфул дреградейшн для ie чтобы там было менее красиво но плавно и быстро!!! на FF сидит 30% аудитории сайтов, на опере тоже на многих сайтах 15-20%. Получается 80% посетителей проклянут сайт за такое! Ой ой ой.
                                0
                                Простите за еще один комент, но я почему-то всегда битый архив скачиваю
                                0
                                Google Chrome — не работает нифига, плюс жуткие тормоза.
                                  –1
                                  Chromium 17+ все работает без тормозов, что странно(открыто более чем 90 вкладок)
                                    0
                                    Chrome 16 Mac работает

                                    Это к вопросу о поддежке в браузерах, кстати :)
                                    +1
                                    Жаль, что поддерживает только картинки.
                                      0
                                      Классно то, что теперь такое возможно благодаря CSS и JS, чтобы сделать похожее, например, в фото-видеоредакторах, нужно потратить ооочень много времени :)
                                        0
                                        Сейчас уже не надо :)
                                          0
                                          Фото-видеоредакторы теперь на HTML5? :)
                                            0
                                            Да просто есть нормальные :)
                                              0
                                              А подкиньте ссылочек?
                                              0
                                              А разве у ютьюба не на хтмл5 видеоредактор?
                                          +2
                                          У меня подтормаживает, хотя комп не самый слабый.
                                            +1
                                            В хроме 15 работает идеально на всём, включая 3D.
                                            В FF8 и IE9 большая часть работает идеально плавно, некоторые совсем немного подтормаживают.
                                            В IE7-8 (во встроенном в IE9 эмуляторе) работает, но уже заметно тормозит.
                                            В виртуалке (одно ядро + гиг оперативки), в IE6 тормозит безбожно, В IE7-8 работает, но медленно.

                                            Это на очень мощном компьютере на i7.
                                            +4
                                            На хабре есть крутой тег source, который умеет отлично подсвечивать и html и javascript и даже css.

                                            Но почему-то никто им не пользуется — все пихают сырцы так, что аж глаза кровоточат. Читать невозможно.
                                              +1
                                              Интересно, что в те времена, когда такие эффекты можно было делать только на AS (а на AS это делалось очень просто), уже тогда все это мельтешение считалось дурным вкусом и практически нигде не использовалось.
                                                +3
                                                красиво
                                                с введением css3 этого следовало ожидать, первым в этом был ninoslider во всяком случае идею с разбиением картинки на блоки

                                                плюсы:
                                                — красиво
                                                — на удивление есть колбеки

                                                минусы:
                                                — можно использовать только для картинок
                                                — допилить будет сложно
                                                — избыточность кода — учитывая что из ~50-ти? анимаций нам нужно будет одну-две
                                                — отсуствие кроссбраузерности — клиента за частую не колышет что ИЕ не поддерживает css3, но зато теперь он скажет что ты «нехороший человек» и не умеешь ничего делать

                                                думаю чем больше css3 будет входить в жизнь и браузеры — тем больше таких плагинов мы получим в итоге. И следующие версии будут уже бесплатны.

                                                Его можно использовать в своих проектах. Но в коммерческих — всегда почему-то возникает проблема что плагин нужно допилить под мега крутой дизайн кастомера. Лезешь в код и понимаешь что половина кода — hardcode. Тут тоже есть кусок HTML кода который генерируется в JS.
                                                  0
                                                  У меня процессор core i7 и анимации подтормаживают в firefox. Что-то здесь не так
                                                    0
                                                    Попробуйте плавные эффекты, например из «Half-Transitions». Некоторые эффекты действительно какие-то фантастические для сегодняшнего интернета, но есть и много плавных, красивых переходов.
                                                    0
                                                    Мне тоже думается что это перебор. Это та же плешь уже какая то.
                                                      0
                                                      Эффектов много, но они однообразны по сути.
                                                      Возможно и приелось из видео слайдов.
                                                        0
                                                        Забегая наперёд хочу сказать: этот обзор сделан потому, что в рунете нет никакого упоминания про это слайд-шоу, отсюда и логика.

                                                        А зачем искать на них? Там же сплошной копипаст с невъебенной задержкой.
                                                          0
                                                          Ловите мой вариант слайдера
                                                          slider.futurity.pro/
                                                          Гибкий, настраиваемый, поддерживает различные шаблоны

                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                          Самое читаемое