Слайдер-аккордеон на CSS3

Слайдер-аккордеон на CSS3
Cлайдер-акордеон сделанный на CSS3 и использующий очень мало кода. Без использования Javascript. Очень простые разметка и логика CSS. Этот слайдер масштабируем к любому количеству изображений и может легко использоваться в веб-сайтах. Этот слайдер очень функциональный, а не просто украшение.

Разметка


<div class="accordian">
    <ul>
	<li>
	    <div class="image_title">
		<a href="#">KungFu Panda</a>
	    </div>
	    <a href="#">
		<img src="http://lsblog.ru/demos/CSS3AccordionStyleSlider/3yiC6Yq.jpg"/>
	    </a>
	</li>
	<li>
	    <div class="image_title">
		<a href="#">Toy Story 2</a>
	    </div>
	    <a href="#">
	        <img src="http://lsblog.ru/demos/CSS3AccordionStyleSlider/40Ly3VB.jpg"/>
	    </a>
	</li>
	<li>
	    <div class="image_title">
		<a href="#">Wall-E</a>
	    </div>
    	    <a href="#">
		<img src="http://lsblog.ru/demos/CSS3AccordionStyleSlider/00kih8g.jpg"/>
	    </a>
	</li>
	<li>
	    <div class="image_title">
		<a href="#">Up</a>
	    </div>
	    <a href="#">
		<img src="http://lsblog.ru/demos/CSS3AccordionStyleSlider/2rT2vdx.jpg"/>
    	    </a>
	</li>
	<li>
	    <div class="image_title">
		<a href="#">Cars 2</a>
	    </div>
	    <a href="#">
		<img src="http://lsblog.ru/demos/CSS3AccordionStyleSlider/8k3N3EL.jpg"   alt="Слайдер-аккордеон на CSS3" title="Слайдер-аккордеон на CSS3" />
	    </a>
	</li>
    </ul>
</div>


CSS


* {
	margin: 0; 
	padding: 0;
}
body {
	background: #ccc; 
	font-family: arial, verdana, tahoma;
}

/*Расчет ширины для работы аккордеона
Ширина изображение= 640px
Всего изображений = 5
Ширина изображения под hover = 640px
Ширина изображения не под hover = 40px - можно установить любую
Общая ширина контейнера  = 640 + 40*4 = 800px;
Ширина по умолчанию = 800/5 = 160px;
*/

.accordian {
	width: 805px; height: 320px;
	overflow: hidden;
	
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*Маленький хак, чтобы предотвратить мерцание на некоторых браузерах*/
.accordian ul {
    width: 2000px;
    /*Это даст достаточное пространство последнему элементу, 
    чтобы переместиться вместо того, чтобы падать вниз -
    мерцание при наведении (hover) */
}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions для эффекта анимации*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Уменьшаем элементы не под hover*/
.accordian ul:hover li {width: 40px;}
/*Используем hover-эффект*/
/*LI hover стиль должен перекрыть  UL hover стиль */
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Стили заголовков изображения*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}



ДЕМО

здесь

English version
An accordian slider(hover based) made in CSS3 using very less code. No Javascript used. The markup and the CSS logic are very simple. This slider is scalable to any number of images and can be easily used in websites. A very functional piece, not just fashion.

0 комментариев

Оставить комментарий