|
Стильный и удобный слайдер для сайтаСовсем недавно мне на глаза попался очень интересный и стильный слайдер для сайта. Конечно, в сети их достаточно много, однако этот поразил меня своей простотой установки и одновременно широкими возможностями. Очень часто вижу применение слайдеров в дизайнах различных сайтов. Смотрятся, довольно симпатично. Да и место можно сэкономить :) Вот типичный пример работы слайдера: В данном случае, работает автопрокрутка, с заданной скоростью и без описания картинок. Также установлен эффект слайдов. Теперь о том, как поставить слайдер на свой сайт: Шаг 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 class="dhonishow">
<img src="img/pic1.jpg" alt="picture1" /> <img src="img/pic2.jpg" alt="picture2" /> ... </div> Опять же, следите, чтобы пути к картинкам были прописаны правильно. Также, обязательно заполняйте атрибут ALT изображений , т.к. эта информация используется для описания картинок по умолчанию. О применении различных эффектов, можете почитать в документации на сайте автора. Те, кто не силен в английском, могут почитать автоматически переведенную с помощью переводчика Google версию документации тут . Главное, что нужно понять, это то, что все настройки производятся через эту строку: <div class="dhonishow">
Это ее стандартный вид. Если нам нужно допустим добавить автопрокрутку, мы просто через пробел пишем необходимую фразу(изначально подсмотрев ее в документации) <div class="dhonishow autoplay_2dot5"> А если вдруг захотелось еще и эффект слайдов добавить, опять же через пробел пишем необходимое правило. <div class="dhonishow autoplay_2dot5 effect_slide">
Таким же образом, добавляются и другие эффекты. Хотелось бы добавить от себя, еще один способ применения такого слайдера, например для рекламы. Подготовить 5 рекламных изображений, для каждого сделать ссылку, и поместить их в слайдер. Поставить автопрокрутку и скрыть все описания. Таким образом, будут меняться изображения и ссылки, на которые ведут эти изображения. И пользователь, будет видеть как-бы постоянно меняющуюся рекламу. Если его что-то заинтересует, он может кликнуть по изображению, и перейдет именно по той ссылке, которая прописана в конкретном изображении. <div class="dhonishow hide-navigation_true">
<a href="#"><img src="img/pic1.jpg" alt="picture1" /></a> <a href="#"><img src="img/pic2.jpg" alt="picture2" /></a> ... </div> Вам вместо знака # нужно подставить свои адреса ссылок. Вот и все. Надеюсь данный слайдер для сайта Вам понравился ! |
Поиск по сайтуLoading
Отвлеченные темы Проблема времени В интернете Как написать исковое заявление в суд? Как проверить качество водки? Как столичные налоговики рекомендуют Корректировка или исправление Остекление балконов Остекление лоджий Кому и зачем нужны наушники? Кладоискательство О снаряжении Где копать? Что делать с находками? Создание терапевтической концентрации Аллергены клещей домашней пыли Аллергены насекомых Астмогенное действие двуокиси серы Аэрозольная терапия Больные СПИДом Вирусно-бактериальные пневмонии Гематогенная стафилококковая пневмония Диагностика, дифференциальная диагностика Диагностические ошибки Жизненный цикл паразита Загрязнение воздуха Изучение антибиотиков Инфекционная интоксикация Инфекционные агенты Кандидоинфекция глотки и гортани Катаболические процессы Клиническая форма риккетсиоза Клинический результат госпитализации Кокцидиоидомикоз Косоглазие Лейшманиоз Микоплазменное поражение верхних дыхательных путей Моноспоридиоз Непереносимость аспирина Очаговая пневмония Пневмонии вызываемые анаэробными бактериями Пневмонии при особо опасных инфекциях Пневмония, вызываемая протеем Прорыв эхинококковой кисты в плевральную полость Проявления пищевой аллергии Развитие воспалительного процесса в дыхательных путях при бронхиальной астме Развитие локальных реакций в дыхательных путях Респираторные вирусные инфекции Слизистая оболочка дыхательных путей Снижение концентрации аллергенов насекомых Стадии бронхиальной астмы Стрептококковые пневмонии Травматические пневмонии Уменьшения количества клещей Физическую активность Функциональные нарушения дыхания у детей, перенесших острый бронхиолит Этническая картина инфекции Карта сайта |