Мы уже не раз рассматривали как создать различного слайд-шоу для сайта, различных форматов, функций, и вариантов организации. В данном уроке мы рассмотрим процесс создания элементарного слайд-шоу с помощью плагина jQuery, Craftyslide — маленькое слайдшоу (только 2kb), построенное на jQuery. Назначение Craftyslide — обеспечивать простой, без рюшечек, вывод изображений. Поэтому получился маленький, простой и эффективный плагин, который. Вот как это все будет выглядеть..

 
Для смены изображений используется плавное проявление, а для навигации — кнопочная панель. Первым шагом является разметка HTML, которая выглядит так:

Создание данного слайд-шоу очень просте: создаем элемент div, который содержит элемент ul со списком изображений (смотрите приведнный выше код). Используйте атрибут title, если вы хотите выводить подписи к изображениям.

Теперь инсталируем сам плагин следующей командой:

Рассмотрим стили CSS, все достаточно просто на первый взгляд и в действии:

Плагин имеет некоторые настройки, по этому их можно настроить под свое усмотрение, вот перечень некоторых опций плагина:

  • width (число)- Задает ширину слайдшоу.
  • height (число)- Задает высоту слайдшоу.
  • pagination (true/false)- Определяет, будет выводиться индикатор страниц или нет. Задайте false, чтобы скрыть индикатор страниц и включить автоматический режим.
  • fadetime (число)-Определяет скорость анимации смены слайдов.
  • delay (число)-Используется в автоматическом режиме(при значении опции pagination false). Определяет время показа слайда.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.