Skip to content

Горизонтальный слайдер-аккордеон на CSS

Cегодня мы будем создавать вариант горизонтального слайдера, когда часть слайдов скрыта, а при наведении на один из них происходит открытие соответствующего слайда и скрытие других. Причем сделаем мы данный эффект, используя только CSS правила.

Перед началом посмотрите демо и скачайте исходные файлы

HTML

Создадим разметку для нашего слайдера-аккордеона, состоящую из списка изображений с подписями:

<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="#">KungFu Panda</a>
</div>
<a href="#"><img src="panda.jpg"/></a>
</li>
<li>
<div class="image_title">
<a href="#">Toy Story 2</a>
</div>
<a href="#"><img src="toys.jpg"/></a>
</li>
<li>
<div class="image_title">
<a href="#">Wall-E</a>
</div>
<a href="#"><img src="walle.jpg"/></a>
</li>
<li>
<div class="image_title">
<a href="#">Up</a>
</div>
<a href="#"><img src="up.jpg"/></a>
</li>
<li>
<div class="image_title">
<a href="#">Cars 2</a>
</div>
<a href="#"><img src="cars.jpg"/></a>
</li>
</ul>
</div>

CSS

В данном примере мы используем 5 картинок для слайдера, каждая шириной в 640 пикселей. При наведении будет показана полная картинка шириной в 640 пикселей, остальные будут шириной 40 пикселей (можете установить свое значение). Тогда ширина всего контейнера =  640 + 40 * 4 = 800 пикселей. Ширина слайда в покое = 800/5 = 160 пикселей.

Напишем соответствующий расчетам CSS:

.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;
}

.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);

/* Эффект анимации */
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/* Ширина слайдов, на которые не наведен курсор */
.accordian ul:hover li {width: 40px;}
/* Ширина слайда, на который наведен курсор */
.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;
}