Пример выскальзывающего заголовка изображения для слайда. Вы можете использовать несколько заголовков для одного слайда.
Здесь пример с двумя заголовками.
Первый загружается непосредственно перед вторым.
Также можно использовать:
Кнопку
Или две
Или другие элементы HTML...
Вы можете определять время трансформаций для любого слайда
Вы можете также выводить видео, но потребуется "скрывающее изображение"...



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

Стандарт
$9/мес.
Кратенькое описание назначения товара
Есть
Есть
Есть
Нет
Основной
беспалтно
Кратенькое описание назначения товара
Есть
Нет
Есть
Нет
Профи
$19/мес.
Кратенькое описание назначения товара
Есть
Есть
Есть
Есть

Методы

$('selector').diapo();Основной формат
$('selector').diapo({fx: 'scrollHorz', time: '5000'});использование опций
$('selector').diapoStop();функция для остановки слайдшоу
$('selector').diapoPlay();функция для запуска слайдшоу

Опции плагина

selector:'div', [целевой элемент]
fx:'random',
  Эффект перехода. Доступные значения: 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'
Также можно задавать более одного эффекта: 'curtainTopLeft, mosaic, bottomLeftTopRight'
mobileFx:'', Эффект перехода в мобильной версии [оставьте значение пустым, чтобы исопльзовался один и тоже эффект в обеих версиях слайдшоу]
slideOn:'random', Использование эффекта для слайда при переходе. Доступные значения: 'next', 'prev', 'random'.
gridDifference:250, Разница во времени между движениями частей нарезки слайда при переходе. Значение должно быть меньше, чем transPeriod.
easing:'easeInOutExpo', Анимационный эффект [полный список смотри по ссылке http: jqueryui.com/demos/effect/easing.html]
mobileEasing:'', Анимационный эффект для мобильной версии [оставьте значение пустым, чтобы исопльзовался один и тоже эффект в обеих версиях слайдшоу]
loader:'pie', Вид индикатора времени показа слайда. Доступные значения: 'pie', 'bar', 'none' (старые версии браузеров не могут вывести индикатор типа "pie", и будут показывать проямоугольный индикатор)
loaderOpacity: .8, Прозрачность индикатора [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
loaderColor:'#ffff00',Цвет индикатора
loaderBgColor:'#222222',Цвет фона индикатора
pieDiameter:50,Диаметр индикатора типа "pie"
piePosition:'top:5px; right:5px', Положение индикатора типа "pie"на слайде
pieStroke:8,Шаг индикатора типа "pie"
barPosition:'bottom', Положение индикатора типа "bar"[bottom, top]
barStroke:5,Шаг индикатора типа "bar"
navigation:true, Вывод кнопок "предыдущий/следующий"[true, false]. Кнопки имеют ID #pix_prev и #pix_next]
mobileNavigation:true, Вывод кнопок "предыдущий/следующий"[true, false] в мобильной версии.
navigationHover:true, Вывод навигации при наведении курсора мыши[true, false].
mobileNavHover:true, Вывод навигации при наведении курсора мыши[true, false] в мобильной версии.
commands:true, Вывод кнопок "старт/стоп" [true, false].
mobileCommands:true, Вывод кнопок "старт/стоп" [true, false] в мобильной версии.
pagination:true, Вывод указателя слайдов [true, false]. Ниже приводится код, который будет вставлен в страницу
  <div id="pix_pag">
    <ul id="pix_pag_ul">
        <li id="pag_nav_0"><span><span>0</span></span></li>
        <li id="pag_nav_1"><span><span>1</span></span></li>
        <li id="pag_nav_2"><span><span>2</span></span></li>
        ...etc.
    </ul>
</div>
mobilePagination:true, Вывод указателя слайдов [true, false] в мобильной версии.
thumbs:true, Вывод миниатюр при наведении кнопки мыши на указатель слайда [true, false]. Недоступно в мобильной версии слайдшоу.
hover:true, пауза при наведении курсора мыши [true, false]. Недоступно в мобильной версии слайдшоу.
pauseOnClick:true, Остановка слайдшоу при нажатии кнопки мыши на слайде[true, false].
rows:4,Количество строк в сетке для нарезки слайда при переходах
cols:6,Количество столбцов в сетке для нарезки слайда при переходах
slicedRows:8, Количество строк при нарезке слайдов для сдвиговых переходов [если значение 0, то исопльзуется то же число, что и rows]
slicedCols:12, Количество столбцов при нарезке слайдов для сдвиговых переходов [если значение 0, то исопльзуется то же число, что и cols][if 0 the same value of cols]
time:3000, Длительность демонстрации слайда в миллесекундах.
transPeriod:1500, Длительность перехода в миллисекундах.
autoAdvance:true, Предварительнное начало перехода[true, false].
mobileAutoAdvance:true, Предварительнное начало перехода [true, false] в мобильной версии слайдшоу.
onStartLoading:function() { },Возвратная функция, которая выполняется при загрузке слайдшоу.
onLoaded:function() { },Возвратная функция, которая выполняется после завершения загрузки слайдшоу.
onEnterSlide:function() { },Возвратная функция, которая выполняется при выводе слайда.
onStartTransition:function() { }Возвратная функция, которая выполняется при старте перехода между сладами.

Атрибуты для элементов HTML

'data-fake'Путь к маскирующему изображению. [iframes (или объект) должен заменяться на изображение при переходе между слайдами. Здесь надо указать путь к маскирующему изображению, смотри пример ниже.]
  <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
'data-thumb'Путь к миниатюре. Размер миниатюры по умолчанию установлен 50x50 px. Вы можете изменить его с помощью стилей.
'data-fx'Тоже, что и опция 'fx'. Используйте данный атрибут, чтобы указать конкретный эффект перехода для слайда
'data-mobileFx'Тоже, что и выше указанный атрибут, но для мобильной версии.
'data-slideOn'next или prev, Казывает слайд, к которому применяется эффект при переходе.
'data-time'в миллисекундах. Время показа слайда
'data-easing'тоже, что и опция 'easing'.
'.fromLeft'Добавьте данный класс элементу (со свойством position:absolute), который будет появляться слева после прерывания эффекта перехода. *
'.fromRight'Добавьте данный класс элементу (со свойством position:absolute), который будет появляться справа после прерывания эффекта перехода. *
'.fromTop'Добавьте данный класс элементу (со свойством position:absolute), который будет появляться сверху после прерывания эффекта перехода. *
'.fromBottom'Добавьте данный класс элементу (со свойством position:absolute), который будет появляться снизу после прерывания эффекта перехода. *
'.fadeIn'Добавьте данный класс элементу (со свойством position:absolute), который будет проявляться после прерывания эффекта перехода. *
 (*)все элементы могут выводиться последовательно