Плагин jQuery - слайдшоу Skitter

Skitter - плагин jQuery, который преобразует неупорядоченный список изображений в слайдшоу с привлекательной анимацией.

Слайдшоу может управляться как цифровыми индикаторами с номерами слайдов, так и миниатюрами. Также имеются кнопки для переключения на предыдущий и следующий слайды.

В состав слайдшоу включены оригинальные эффекты анимации при переходах от одного слайда к другому.

Опции позволяют настроить вывод слайдшоу так, чтобы было удобно пользователю. Также возможно указать с помощью атрибута class для каждого слайда свой тип анимации в рамках одного слайдшоу.

HTML

<div class="box_skitter box_skitter_small">
    <ul>
        <li>
            <a href="http://codecanyon.net"><img src="images/01.jpg" class="block"></a>
            <div class="label_text">
                <p>Label</p>
            </div>
        </li>
        <li>
            <a href="http://activeden.net"><img src="images/02.jpg" class="cube"></a>
            <div class="label_text">
                <p>Label</p>
            </div>
        </li>
        <li>
            <a href="http://themeforest.net"><img src="images/03.jpg" class="default"></a>
            <div class="label_text">
                <p>Label</p>
            </div>
        </li>
    </ul>
</div>

JavaScript

$(function(){
    $('.box_skitter_small').skitter();
});

Опции скрипта

velocity
Скорость анимации. Значение по умолчанию: 1
interval
Время показа изображения. Значение по умолчанию: 2500
animation
Тип анимации. Значение по умолчанию: null или определяется в <li> class
numbers
Вывод цифровых указателей. Значение по умолчанию: true
navigation
Вывод элементов навигации. Значение по умолчанию: true
label
Вывод меток. Значение по умолчанию: true
easing_default
Тип перехода. Значение по умолчанию: null
animateNumberOut
Стиль цифровых указателей. Значение по умолчанию: {backgroundColor:'#333', color:'#fff'}
animateNumberOver
Стиль цифровых указателей при наведении курсора мыши. Значение по умолчанию: {backgroundColor:'#000', color:'#fff'}
animateNumberActive
Стиль активного цифрового указателя. Значение по умолчанию: {backgroundColor:'#cc3333', color:'#fff'}
thumbs
Включение навигации с помощью миниатюр. Значение по умолчанию: false

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 20 Апреля 2011 19:12
    antosha
    хороший плагин спасибо тебе сергей
  • 20 Апреля 2011 20:20
    Ygreec
    Самое то! Дайте выбор пользователю - он сам решит как ему лучше! А как бы сделать, чтобы после того, как юзер настроит слайдшоу, опции настроек можно было бы убрать, чтобы не засоряли контент? а лучше если потом можно вызвать опять...
  • 20 Апреля 2011 20:58
    AntiBuger
    Слайдер просто класс!!!
    • 21 Апреля 2011 17:45
      axotnik88
      А в него есть автозапуск?
      • 24 Апреля 2011 21:28
        AntiBuger
        да, есть
        • 28 Апреля 2011 17:39
          axotnik88
          и как ?
          • 29 Апреля 2011 07:58
            AntiBuger
            $('.box_skitter_large').skitter();
            • 29 Апреля 2011 17:55
              axotnik88
              спс
  • 1 Мая 2011 20:03
    linkan
    В jQuery не разбираюсь. кому не сложно помочь хочу выставить на странице только меняющиеся картинки причём смена нужна разными стилями. кнопки самостоятельного выбора опций не нужны и боковые стрелки тоже. только нумерация сверху или с низу. попробовал сам всё сделать но не получилось даже запустить=( Помогите пожалуйста, кому не лень поподробнее рассказать от и до про этот скрипт. Уж очень скрипт понравился.
  • 8 Мая 2011 18:07
    vitallativ
    шикарный слайдер! всё просто и очень удобно, разместил на сайте. жаль лишь что IE9 его не любит, там ошибка при загрузке изображения.
  • 16 Июня 2011 17:47
    sfera91
    Izvinite a pocemu tolica 21 ,cac izmeniti stob dabaviti bolishe fotak?pajalusta pamaghite srocino nujno
  • 1 Июля 2011 16:05
    Satelite_ru
    Ребят, пожалуйста, кому не трудно, можете объяснить чуть поподробнее что делать с содержимым архива конкретно для ucoz и чуть поподробнее расписать все чайнику. Уж очень скрипт понравился, пожалуйста, добрые люди, помогите :(((((
  • 6 Июня 2012 20:12
    timuramin
    Подскажите пожалуйста, как сделать что бы ссылка открывалась в новом окне браузера, а не в этом же.
  • 27 Апреля 2014 19:47
    Survivor
    Очень интересно! Попробую взять)
  • 6 Января 2015 21:13
    xerox21
    А как отключить ссылку на изображении? Не могу понять где она присваивается.
  • 9 Мая 2015 21:07
    boome
    Что нужно делать с архивом? Помогите разобраться пожалуйста
  • 22 Мая 2016 13:00
    Nail Azizov
    У меня на Хроме не работало оказалось из-за Адблока. Имейте ввиду установите а у клиента потом не будет работать.
^ Наверх ^