Стильный слайдер с автопрокруткой

На днях наткнулся на видеоролик, снятый КВН-щиками. В конце был интересный эффект вместо титров. Действующие лица прокручивались в 3 картинки с эффектом растворения. Это породило идею реализовать стильный слайдер на основе jQuery.

Сама идея. Обычный прямоугольный блок с черным фоном определенного размера. В нем размещены одинаковые по размерам 3 блока. В каждом из них можно разместить любой контент, будь то картинка, текст, ссылки или комбинированный набор тегов. Изначально блоки не видны. Анимация происходит в несколько этапов:

• плавное отображение блока №1;
• плавное отображение блока №2;
• одновременное отображение блока №3 и растворение блока №1;
• растворение блока №2;
• растворение блока №3 и замена содержимого блоков на следующий контент;
• повторение действий с первого пункта.

Реализацию слайдера можно увидеть на следующем примере:

Стильный слайдер от SzenProgs.ru.

Может прокручивать сотни фотографий в ограниченном пространстве.

Версия слайдера №3

А теперь расскажу, как этот скрипт стильного слайдера установить на сайт.

Для начала нужно подключить jQuery на страницу. Если jQuery у вас уже подключен, переходите ко второму этапу. jQuery подключается следующим кодом:

Теперь нужно разместить на странице сайта блок с контентом, в котором и будет происходить слайдинг. Его нужно разместить там, где должен стоять слайдер. Блок оформляем так:

Важно сделать общий блок с уникальным идентификатором ID. В нашем случае это spslider3. Внутрь этого блока уже можно размещать любые комбинации тегов. Важное условие при размещении тегов: в слайдере будут крутиться все дочерние элементы основного блока. Тоесть, если вы хотите разместить в слайдер группу тегов, то обрамляйте их тегом DIV.

Цвет фона, шрифт и все другие CSS параметры основного блока можете прописать свои. Главное условие - не задавать блоку в CSS ширины, высоты и внутренних полей. Они все равно будут перекрыты скриптом.

Сразу после основного блока размещаем следующий скрипт:

Параметры вызова функции $spslider3.ready(speed, id, width, height, padding):

• speed - скорость смены затухания и появления контента в слайдере, задается в миллисекундах.
• id - имя ID основного блока.
• width - ширина каждого из 3-х внутренних блоков, задается в пикселях.
• height - высота каждого из 3-х внутренних блоков, задается в пикселях.
• padding - Поля между основным блоком и внутренними блоками, задается в пикселях.

Это достаточные условия, чтобы скрипт стильного слайдера заработал. Скрипт вы можете перенести на свой хост. Убедительная просьба, если публикуете этот скрипт, оставляйте информацию о создателе. Мне будет обидно, если мой труд кто-то присвоит.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

• 1
• 2
• 3
• 4
• 5

Стильный слайдер с автопрокруткой
Скрипты
Скрипты, инструкции, справочники

Для работы понадобится jQuery.