Главная » Файлы » Прочие скрипты » jQuery |
Красивый слайдер через плагин Barousel на jQuery
23.06.14, 09:35:13 | |
Довольно-таки неплохой плагин для создания слайдшоу. Немного капризен в настройке, но всё же сделан он качественно Для начала посмотрите ДЕМО (Самый нижний пример) Установка: После /head на нужных страницах вставляйте: Код <link rel="stylesheet" type="text/css" href="/css/barousel_demo.css" /> <script src="/js/jquery.barousel.min.js" type="text/javascript"></script> <script src="/js/jquery.thslide.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#barousel_thslide').barousel({ navWrapper: '#thslide_barousel_nav .thslide_list', manualCarousel: 1, navType: 3, scrollOver: 1 }); $('#thslide_barousel_nav').thslide({ itemOffset: 93 }); }); </script> В то место, где будет сам слайдер, вставляйте следующий код: Код <div id="barousel_thslide" class="barousel"> <div class="barousel_image"> <!-- image 1 --> <img src="Ссылка на большое изображение 1" alt="" class="default" /> <!-- image 2 --> <img src="Ссылка на большое изображение 2" alt="" /> <!-- image 3 --> <img src="Ссылка на большое изображение 3" alt="" /> <!-- image 4 --> <img src="Ссылка на большое изображение 4" alt="" /> <!-- image 5 --> <img src="Ссылка на большое изображение 5" alt="" /> <!-- image 6 --> <img src="Ссылка на большое изображение 6" alt="" /> <!-- image 7 --> <img src="Ссылка на большое изображение 7" alt="" /> <!-- image 8 --> <img src="Ссылка на большое изображение 8" alt="" /> </div> <div class="barousel_content"> <!-- content 1 --> <div class="default"> Описание к изображению 1 </div> <!-- content 2 --> <div> Описание к изображению 2 </div> <!-- content 3 --> <div> Описание к изображению 3 </div> <!-- content 4 --> <div> Описание к изображению 4 </div> <!-- content 5 --> <div> Описание к изображению 5 </div> <!-- content 6 --> <div> Описание к изображению 6 </div> <!-- content 7 --> <div> Описание к изображению 7 </div> <!-- content 8 --> <div> Описание к изображению 8 </div> </div> <div id="thslide_barousel_nav" class="thslide"> <div class="thslide_nav_previous"> <a href="#"></a> </div> <div class="thslide_list"> <ul> <li><a href="#"><img src="Ссылка на маленькое изображение 1" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 2" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 3" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 4" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 5" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 6" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 7" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 8" alt="" /><span></span></a></li> </ul> </div> <div class="thslide_nav_next"> <a href="#"></a> </div> <div class="clearer"></div> Остаётся лишь залить два скрипта из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images Материал подготовлен Apocalypse | |
Просмотров: 455 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |