Главная » Файлы » Прочие скрипты » 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
Категория: jQuery | Добавил: Apocalypse | Теги: Barousel, Через, красивый, на, плагин, JQuery, слайдер
Просмотров: 279 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: