Слайдер аккордеон на чистом CSS3 | Творческая студия Cruelten
Блог
Делимся с Вами своими знаниями и новостями
29.10.2017

Слайдер аккордеон на чистом CSS3

Слайдер аккордеон на чистом CSS3

Слайдер аккордеон на чистом CSS3 позволит Вам реализовать Вашу мечту о простом и удобном слайдере аккордеоне, который Вы легко реализуете на своем сайте.

Итак, для начала давайте посмотрим демо. Его я реализовал на сайте моего клиента. Смотреть можно здесь. Посмотрели? Теперь давайте его сделаем.

Это наша верстка. Обратите внимание, что Вам надо обязательно поменять ссылки на свои изображения. Как видите, ничего необычного в верстке у нас нет. Самое интересное у нас в CSS.

<div class="accordian">
  <ul>
    <!-- 1 элемент слайдера -->
    <li>
      <div class="image_title">
        <a href="http://www.nmk-mebel.ru/raspil-dsp-ldsp">Распил ДСП<br><span>по Вашим размерам</span></a>
      </div>
      <a href="http://www.nmk-mebel.ru/raspil-dsp-ldsp">
        <img src="/img/slider/slide.jpg">
      </a>
    </li>
    <!-- 2 элемент слайдера -->
    <li>
      <div class="image_title">
        <a href="http://kupe.nmk-mebel.ru/">Двери-купе<br><span>на заказ</span></a>
      </div>
      <a href="http://kupe.nmk-mebel.ru/">
        <img src="/img/slider/slide2.jpg">
      </a>
    </li>
    <!-- 3 элемент слайдера -->
    <li>
      <div class="image_title">
      <a href="http://www.nmk-mebel.ru/uslugi/arenda_plowadej1">Мебельный цех<br><span>в аренду</span></a>
      </div>
      <a href="http://www.nmk-mebel.ru/uslugi/arenda_plowadej1">
        <img src="/img/slider/slide3.jpg">
      </a>
    </li>
    <!-- 4 элемент слайдера -->
    <li>
      <div class="image_title">
      <a href="http://www.nmk-mebel.ru/uslugi/pokraska_mebelnyh_fasadov">Мебельные фасады<br><span>покраска, изготовление</span></a>
      </div>
      <a href="http://www.nmk-mebel.ru/uslugi/pokraska_mebelnyh_fasadov">
        <img src="/img/slider/slide4.jpg">
      </a>
    </li>       
  </ul>
</div>

А это CSS.

.accordian {
width: 990px; height: 375px;
overflow: hidden;
margin: 20px auto;
-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);
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
 
/*Небольшой хак для предотвращения мелькания на некоторых браузерах*/
.accordian ul {
width: 2000px;
padding: 0;
    margin: 0;
}
 
.accordian li {
position: relative;
display: block;
width: 247px;
float: left;
border-left: 1px solid #888;
/* создание тени */     
-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);  
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
/* Создание анимации с помощью переходов */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;  
transition: all 0.5s;
}
 
/* Уменьшить ширину для неактивных изображений */
.accordian ul:hover li {
width: 80px;
}
 
/* Задание ширины изображения при поднесении к ней курсора */
/* Данный стиль (li:hover) переопределит ul:hover */
.accordian ul li:hover {
width: 750px;
}
 
.accordian li img {
display: block;
width: 750px;
}
 
/* Стиль для блока, содержащего ссылку */
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;  
width: 750px;   
}
 
/* Стиль для ссылки */
.image_title a {
display: block;
color: #fff;
font-weight: 200;
text-decoration: none;
padding: 20px;
font-size: 24px;
}
.image_title a span {
    font-size: 18px;
}

Размеры слайдера

А вот и наш CSS. Немного комментариев. Данный слайдер я делал под следующие размеры.

  • Ширина слайдера: 990px.
  • Ширина каждого слайда: 750px.
  • Ширина каждого слайда в закрытом виде – 247px.

Все эти размеры есть в CSS. Все можно поменять. Поэтому экспериментируйте, а если есть вопросы, задавайте их под этой статьей. Надеемся, Вам понравился данный слайдер.

Метки: ,

Комментарии:

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению голосом Вашего проекта. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, звоните.