top
logo


Стильный и удобный слайдер для сайта PDF Печать E-mail
Автор: adm   
17.10.13 15:37

Стильный и удобный слайдер для сайта

Совсем недавно мне на глаза попался очень интересный и стильный слайдер для сайта. Конечно, в сети их достаточно много, однако этот поразил меня своей простотой установки и одновременно широкими возможностями.

Очень часто вижу применение слайдеров в дизайнах различных сайтов. Смотрятся, довольно симпатично. Да и место можно сэкономить :)

 

В данном случае, работает автопрокрутка, с заданной скоростью и без описания картинок. Также установлен эффект слайдов.

Теперь о том, как поставить слайдер на свой сайт:

Шаг 1: перейти на сайт автора, и скачать архив со скриптом(кнопка для скачивания внизу страницы слева)

Шаг 2 : извлечь скачанный архив и положить файлы в корень своего сайта. Можно также переименовать папку. По умолчанию, она называется lifedraft-dhonishow-210c4fb , я лично переименовал ее в slaid. В итоге у меня получилась папка slaid, внутри которой расположены 3 папки(lib, src и test) и 3 файла.

Шаг 3: подключить нужные библиотеки и стили к странице. В моем случае, это будет выглядеть так:

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

Обязательно следите, чтобы пути к файлам были прописаны правильно, иначе ничего работать не будет. Также, для тех, кто не знает, указанный выше код, нужно вставлять в голову документа, т.е. между открывающим и закрывающим тегами <head> .

Шаг 4: создать блок с картинками.

<div>

<img src="/img/pic1.jpg" alt="picture1" />
<img src="/img/pic2.jpg" alt="picture2" />
...
</div>

Опять же, следите, чтобы пути к картинкам были прописаны правильно. Также, обязательно заполняйте атрибут ALT изображений , т.к. эта информация используется для описания картинок по умолчанию.

описание картинок в слайдере

О применении различных эффектов, можете почитать в документации на сайте автора. Те, кто не силен в английском, могут почитать автоматически переведенную с помощью переводчика Google версию документации тут .

Главное, что нужно понять, это то, что все настройки производятся через эту строку:

<div>

Это ее стандартный вид.

Если нам нужно допустим добавить автопрокрутку, мы просто через пробел пишем необходимую фразу(изначально подсмотрев ее в документации)

<div>

А если вдруг захотелось еще и эффект слайдов добавить, опять же через пробел пишем необходимое правило.

<div>

Таким же образом, добавляются и другие эффекты.

Хотелось бы добавить от себя, еще один способ применения такого слайдера, например для рекламы. Подготовить 5 рекламных изображений, для каждого сделать ссылку, и поместить их в слайдер. Поставить автопрокрутку и скрыть все описания.

Таким образом, будут меняться изображения и ссылки, на которые ведут эти изображения. И пользователь, будет видеть как-бы постоянно меняющуюся рекламу. Если его что-то заинтересует, он может кликнуть по изображению, и перейдет именно по той ссылке, которая прописана в конкретном изображении.

<div>

<a href="#"><img src="/img/pic1.jpg" alt="picture1" /></a>
<a href="#"><img src="/img/pic2.jpg" alt="picture2" /></a>
...
</div>

Вам вместо знака # нужно подставить свои адреса ссылок.

Вот и все. Надеюсь данный слайдер для сайта Вам понравился !

 

источник: http://zvirec.com/view_post.php?id=66

ссылка на материал: http://www.thin.kiev.ua/web/38-web/800-slideshow-html-1.html

{jcomments on}

Последнее обновление 17.10.13 15:44
 
Интересная статья? Поделись ей с другими:

bottom

 

Unreal Commander PfSense по русски Яндекс.Метрика