Слайдер DhoniShow

Автор: Aport Понедельник, Февраль 2nd, 2015 Нет комментариев

Рубрика: Уроки JavaScript

Горизонтально-вертикальный слайдер, в котором можно сделать авто-прокрутку и изменить положение полосы описания или вовсе ее убрать.

Чтобы вы поняли, нужно Вам это или нет, сразу приведу живой пример.

Отлично выглядит, кроме того есть множество опций: изображения могут двигаться вертикально, можно сделать авто-прокрутку, можно изменить положение полосы описания или вовсе ее убрать.

Установка и настройка

Для работы этого слайдшоу нам потребуются jQuery, плагин к Dhonishow и немного картинок.сайт источник http://yapro.ru Sat Jan 23 2010 23:32:39 GMT+0300

Сначало подключаем нужные библиотеки и стили к страничке.

<link rel="stylesheet" href="src/dhonishow.css" type="text/css" media="screen" />
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="src/jquery.dhonishow.js" type="text/javascript"></script>

Теперь создадим блок с картинками:

<div>
 <img src="img/rocker.jpg" alt="Rocker" />
 <img src="img/rocker2.jpg" alt="Rocker 2" />
 ...
</div>

Описания изображений берутся из их alt атрибута, так что не стоит им пренебригать.

Для настройки же, вы должны изменять class вашего блока с картинками, полную документацию вы найдете на сайте автора.

Чтобы заработало под IE6, в CSS-файле нужно убрать на левую и на правую кнопку:

* html .dhonishow .dhonishow-previous-button {
background-image: none;
}

Пример в отдельном окне »

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты