Слайдшоу floom использующее библиотеку mootools 1.3+.

jаvascript

В этот раз начнем с jаvascript - подключаем mootools и mootools more (расширения), плагин floom:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="mootools-more-1.4.0.1.js"></script>
<script type="text/javascript"  src="floom.js"></script>

CSS

И два файла со стилями: screen.css - это для Демо, а floom.css - для плагина:

<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="floom.css" type="text/css" media="screen" />

Есть два пути использования данного плагина.

Это формировать описание слайдов в jаvascript коде:

jаvascript

var slides = [
    {
        image: '1.jpg',
        caption: 'С Рождеством Христовым я Вас поздравляю!'
    },
    {
        image: '2.jpg',
        caption: 'Счастья и здоровья, блага всем желаю,'
    },
    {
        image: '3.jpg',
        caption: 'Святости, лукавства - в меру чтоб всего,'
    },
    {
        image: '4.jpg',
        caption: 'Радости, удачи. Плохого - ничего!'
    },
    {
        image: '5.jpg',
        caption: 'pcvector.net и pcvector.ru поздравляет всех с Рождеством!!!'
    }
];

$('blinds').floom(slides, {
    axis: 'vertical'
});

И с таким вот HTML:

Разметка HTML

<div id="blinds"></div>

Или формировать описания непосредственно в html коде:

Разметка HTML

<div id="blinds">
    <img title="Описание 0" alt="" src="0.jpg" />
    <img title="Описание 1" alt="" src="1.jpg" />
    <img title="Описание 2" alt="" src="2.jpg" />
    <img title="Описание 3" alt="" src="3.jpg" />
    <img title="Описание 4" alt="" src="4.jpg" />
</div>

jаvascript

$('blinds').floom($$('#blinds img'), {
    axis: 'vertical'
});