Slidorion - слайдер и аккордеон в одном

Данный плагин для jquery совмещает в себе и слайдер изображений и аккордеон из описания к ним.

HTML

Для первого слайдера в Демо, структура будет такой

<div id="slidorion">
   
    <div id="slider">
        <div class="slider-image" rel="section1">
            <img src="img/ice-age-continental-drift.jpg" width="488" height="400" />
        </div>
        <div class="slider-image" rel="section2">
            <img src="img/puss-in-boots.jpg" width="488" height="400" />
        </div>
        <div class="slider-image" rel="section3">
            <img src="img/madagascar_3.jpg" width="488" height="400" />
        </div>
    </div>
   
    <div id="accordion">
        <div class="header"><a class="slider-link" rel="section1">Ледниковый период 4</a></div>
        <div class="content">
            <p><b>Континентальный дрифт</b><br/>
            Действие развернется в наши дни, где выставленные в палеонтологическом музее Мэнни, Сид, Диего, Элли, Скрат и Персик окажутся случайно размороженными.<br/><br/>
            5 июля в России</p>
            <a href="#">Читать далее</a>
        </div>
        <div class="header"><a class="slider-link" rel="section2">Кот в сапогах</a></div>
        <div class="content">
            <p>Мечи пересекутся и сердца будут разбиты в приключениях с одним из самых любимых персонажей из Шрэка — котом в сапогах. Это удалая поездка ранних лет кота в сапогах, когда он объединяется с умным Шалтай-Болтаем и сообразительной Кисой, чтобы украсть знаменитую Гусыню, несущую золотые яйца.<br/><br/>
            27 октября 2011 в России</p>
            <a href="#">Читать далее</a>
        </div>
        <div class="header"><a class="slider-link" rel="section3">Мадагаскар 3</a></div>
        <div class="content">
            <p>Лев Алекс, зебра Марти, жираф Мелман и бегемот Глория присоединяются к бродячему цирку, в надежде вернуться в Нью-Йорк.<br/><br/>
            7 июня 2012 в России</p>
            <a href="#">Читать далее</a>
        </div>
    </div>
   
</div>

CSS

Стили страницы и самого плагина в файлах:

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slidorion.css" />

JS

Подключаем jQuery, easing для эффектов и сам slidorion:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.js"></script>

Вызываем плагин (сразу два варианта, как в демо):

$(document).ready(function() {
    $('#slidorion').slidorion({
        hoverPause: true,
        interval: 2500,
        speed: 500,
        effect: 'fade'
    });
    $('#slidorion1').slidorion({
        interval: 4000,
        speed: 1000,
        effect: 'overLeft'
    });
});

Опции