Slidorion совмещает в себе и слайдер изображений и аккордеон из описания к ним.
Разметка 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>
Действие развернется в наши дни, где выставленные в палеонтологическом музее Мэнни, Сид, Диего, Элли, Скрат и Персик окажутся случайно размороженными.
5 июля в России</p>
<a href="#">Читать далее</a>
</div>
<div class="header"><a class="slider-link" rel="section2">Кот в сапогах</a></div>
<div class="content">
<p>Мечи пересекутся и сердца будут разбиты в приключениях с одним из самых любимых персонажей из Шрэка — котом в сапогах. Это удалая поездка ранних лет кота в сапогах, когда он объединяется с умным Шалтай-Болтаем и сообразительной Кисой, чтобы украсть знаменитую Гусыню, несущую золотые яйца.
27 октября 2011 в России</p>
<a href="#">Читать далее</a>
</div>
<div class="header"><a class="slider-link" rel="section3">Мадагаскар 3</a></div>
<div class="content">
<p>Лев Алекс, зебра Марти, жираф Мелман и бегемот Глория присоединяются к бродячему цирку, в надежде вернуться в Нью-Йорк.
7 июня 2012 в России</p>
<a href="#">Читать далее</a>
</div>
</div>
</div>
CSSСтили страницы и самого плагина в файлах:
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slidorion.css" />
javascriptПодключаем jQuery, easing для эффектов и сам slidorion:
<script type="text/javascript" src="js/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'
});
});
Опции-
autoPlay - Автоматическая смена слайдов (логическая переменная)
-
easing - Эффект перехода анимации (строка)
-
effect - Эффект смены слайдов (строка)
-
first - Первый слайд для показа (атрибут rel данного слайда) (строка)
-
hoverPause - Пауза при наведении курсора мыши (логическая переменная)
-
interval - Задержка перед сменой слайдов (число)
-
speed - Скорость анимации (число)
Внимание! У вас нет прав для просмотра скрытого текста.