• Автор:

    Flesha
  • Добавлено:

    дек 20, 2011
  • Комментариев:

    1
  • Просмотров:

    3834

Хак слайдер Slidorion

Хак слайдер Slidorion

Комбинация слайдера изображений и аккордеона. Выводит картинки совместно с описанием любой длины.

Использование:
Включаем в код страницы jQuery, jQuery UI и Slidorion
<link rel="stylesheet" href="css/slidorion.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.js"></script>


Структура кода HTML:
<div id="slidorion">
<div id="slider">
<div class="slider-image" rel="section1">
<img src="sample.jpg" width="500" height="400" />
</div>
<div class="slider-image" rel="section2">
<img src="sample.jpg" width="500" height="400" />
</div>
<div class="slider-image" rel="section3">
<img src="sample.jpg" width="500" height="400" />
</div>
</div>
<div id="accordion">
<div class="header"><a class="slider-link" rel="section1">Кунг Фу Панда 2</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
<div class="header"><a class="slider-link" rel="section2">Темный рыцарь</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
<div class="header"><a class="slider-link" rel="section3">Типа крутые легавые</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
</div>
</div>


Инициализация:
<script>
$(document).ready(function(){
$('#slidorion').slidorion();
});
</script>


Использование опций:
<script>
$(document).ready(function(){
$('#slidorion').slidorion({
speed: 1000,
interval: 4000,
effect: 'slideLeft'
});
});
</script>


Опции:
autoPlay
Автоматическая смена слайдов (логическая перменная)
easing
Эффект перехода анимации (строка)
effect
Эффект смены слайдов (строка)
first
Первый слайд для вывода (атрибут rel данного слайда) (строка)
hoverPause
Включение паузы проигрывания при наведении курсора мыши (логическая перменная)
interval
Задержка перед сменой слайдов (число)
speed
Скорость анимации (число)


Версия DLE: 9.0-9.x

Внимание! У Вас нет прав для просмотра скрытого текста.
Вернуться

Комментарии:


  1. VictorZ → 29 декабря 2011 04:16
    у меня не отображается Использование в данном хаке
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.