Яндекс.Метрика

    Песочница

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

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

    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)

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

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


    image

    html-код:

    image

    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*/ }
    })
    })


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

    Допустим, мы имеем слайд:
    image
    Назначаем параметру xOffset 50px, получаем такое:
    image
    Мы видим, что слайд стал порезанным на ленточки по вертикали. Установленное нами значение 50px означает, что теперь ширина полоски — 100px, то есть левая и правая граница равна 50px. Аналогично и с yOffset.
    Теперь давайте установим параметру rotate 20 градусов и rotateSymmetric: true
    image
    Получили слайд, границы полоски которого повернуты на 10 едениц каждая, если поставить rotateSymmetric: false, получается такая картинка:
    image
    Давайте попробуем повернуть слайд на -10градусов, напишим rotate: -10:
    image
    xOffset: -100:
    image
    Здесь мы видим как полоски поменялись местами. Произошло это потому что мы установили xOffset равное значение ширины слайда, но с отрицательным знаком, поэтому такой эффект (послдение полоски стали первыми, первые — последними...)
    Также не стоит устаналивать scaleX: 0.5, потому что полоски будут иметь половиный вид:
    image

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

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

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

    rotateZ=10
    image
    rotateZ=0, rotateMid=-30
    image
    rotateZ=0, rotateMid=-30, rotate=20, rotateSymmetric=false
    image
    rotateZ=0, rotateMid=-30, rotate=20, rotateSymmetric=true
    image

    Это только 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. Почему-то хтмл-код не отображался, пришлось сделать скрин… Может так и должно быть — я не знаю.