Красивые слайдеры все чаще встречаются на сайтах, как элемент дизайнерского оформления, они становятся популярны и полезны для отображения важной информации на веб-сайтах. У нас на dle9.com
1. Красивый слайдер выбора новостей хак dle со многими возможностями , на основе скрипта JS
2. Два вида установок слайдера
3. Демо, а также PSD файлы для редактирования
Хак Dle красивый слайдер выбора новостей
Установка
1. Закачайте папки images и js на сервер
2. Из файла style.css добавьте код в каскад стилей или в main.tpl между
<head> ... </head>Добавьте:
<link rel="stylesheet" href="/templates/Default/style.css" type="text/css" media="screen" />А файл style.css закачайте в шаблон
3. Пример кода возьмите из файла index.html и вставьте в нужное место вывода слайдера :
<div id="loopedSlider"> <a href="#" class="previous">previous</a> <a href="#" class="next">next</a> <div id="wrap"> <div class="container"> <div class="slides"> <div><img src="images/1_1_.jpg" width="928" height="286" alt="First Image" /></div> <div><img src="images/2_1_.jpg" width="928" height="286" alt="First Image" /></div> <div><img src="images/3_1_.jpg" width="928" height="286" alt="First Image" /></div> </div> </div> </div> </div><div id="alt"><div id="loopedSlider2"> <a href="#" class="previous green-prev">previous</a> <a href="#" class="next green-next">next</a> <div id="wrap2"> <div class="container2"> <div class="slides2"> <div><img src="images/4_1_.jpg" width="400" height="286" alt="First Image" /></div> <div><img src="images/5_1_.jpg" width="400" height="286" alt="First Image" /></div> <div><img src="images/6_1_.jpg" width="400" height="286" alt="First Image" /></div> </div> </div> </div> </div><div id="loopedSlider3"> <a href="#" class="previous orange-prev">previous</a> <a href="#" class="next orange-next">next</a> <div id="wrap3"> <div class="container3"> <div class="slides3"> <div><img src="images/7_1_.jpg" width="400" height="286" alt="First Image" /></div> <div><img src="images/6_1_.jpg" width="400" height="286" alt="First Image" /></div> <div><img src="images/4_1_.jpg" width="400" height="286" alt="First Image" /></div> </div> </div> </div> </div></div><script type="text/javascript" charset="utf-8"> $(function(){ // Option set as a global variable $.fn.loopedSlider.defaults.addPagination = false; $('#loopedSlider').loopedSlider(); $('#loopedSlider2').loopedSlider(); $('#loopedSlider3').loopedSlider(); });</script>Советуем скачать hak DataLife Engine красивый слайдер выбора новостей
