3D слайдер на CSS 3 и JQuery

3D галерея с одним изображением в центре и по одному по бокам. Переключение изображений идет по кругу, можно задать время смены картинок и автозапуск.

HTML

<section id="dg-container" class="dg-container">
	<div class="dg-wrapper">
		<a href="#">
			<img src="images/1.jpg" alt="image01">
			<div>Описание первого слайда</div>
		</a>
		<a href="#">
			<img src="images/2.jpg" alt="image01">
			<div>Описание второго слайда</div>
		</a>
		<a href="#">
			<!-- ... -->
		</a>
		<a href="#">
			<img src="images/100.jpg" alt="image01">
			<div>Описание сотого слайда</div>
		</a>
		<!-- ... -->
	</div>
<!--навигация-->
	<nav>	
		<span class="dg-prev"><</span>
		<span class="dg-next">></span>
	</nav>
</section>

Инициализация слайдера:

$('#dg-container').gallery();

Доступные настройки

current		: 0,	
// номер стартового слайда

autoplay	: false,
// слайдшоу on / off

interval	: 2000  
// время перехода

Еще 4 материала, которые возможно Вам понравятся:

Добавить комментарий

Комментарии (0)