Горизонтальный слайдер-аккордеон изображений
Создаём горизонтальный слайдер-аккордеон изображений на CSS3.
Слайдер так же адаптируется под мобильные разрешения экрана.
Как использовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="accordion"> <ul> <li> <div> <a href="#"> <h2>Title 1</h2> <p>Description 1</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 2</h2> <p>Description 2</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 3</h2> <p>Description 3</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 4</h2> <p>Description 4</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 5</h2> <p>Description 5</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 6</h2> <p>Description 6</p> </a> </div> </li> </ul> </div> |
2. Оформляем с помощью CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.accordion { width: 100%; max-width: 1080px; height: 250px; overflow: hidden; margin: 50px auto; } .accordion ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 250px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .accordion ul li div { display: block; overflow: hidden; width: 100%; } .accordion ul li div a { display: block; height: 250px; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .accordion ul li div a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; } .accordion ul li div a h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 160px; } .accordion ul li div a p { top: 160px; font-size: 13.5px; } |
3. Добавляем фоновые изображения
|
1 2 3 4 5 6 7 8 9 10 11 |
.accordion ul li:nth-child(1) { background-image: url("1.jpg"); } .accordion ul li:nth-child(2) { background-image: url("2.jpg"); } .accordion ul li:nth-child(3) { background-image: url("3.jpg"); } .accordion ul li:nth-child(4) { background-image: url("4.jpg"); } .accordion ul li:nth-child(5) { background-image: url("5.jpg"); } .accordion ul li:nth-child(6) { background-image: url("6.jpg"); } |
4. Подключаем эффекты
|
1 2 3 4 5 6 7 8 9 10 11 |
.accordion ul:hover li { width: 8%; } .accordion ul:hover li:hover { width: 60%; } .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } .accordion ul:hover li:hover a * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } |
5. Ну и напоследок — адаптация под мобильные разрешения экранов (менее 600px)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media screen and (max-width: 600px) { .accordion { height: auto; } .accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover { position: relative; display: table; table-layout: fixed; width: 100%; -webkit-transition: none; transition: none; } } |
