» » Слайдер аккордеон

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

Нашла красивый слайдер аккордеон на сайте dwstroy.ru. Там же расписаны все шаги создания слайдера. 
Аккордеон на CSS. Наводя мышкой на картинку, она раскрывается, а остальные остаются сжатыми. 
В коде нужно только прописать путь к адресам картинок и, если есть желание поменять какие-то размеры или цвета слайдера. Устанавливается аккордеон в гаджет или в статью, в редакторе, в режиме html.

Код слайдера

Сперва давайте посмотрим на сам слайдер.
Код слайдера
Теперь код:
<div class="dws-wrapper">
        <ul class="accordion">
            <li><img src="ваше фото 1" alt=""></li>
            <li><img src="ваше фото 2" alt=""></li>
            <li><img src="ваше фото 3" alt=""></li>
            <li><img src="ваше фото 4" alt=""></li>
            <li><img src="ваше фото 5" alt=""></li>
            <li><img src="ваше фото 6" alt=""></li>
            <li><img src="ваше фото 7" alt=""></li>
        </ul>
    </div>
    <style>
.dws-wrapper{
 max-width: 700px;
 margin: 0 auto;
}
ul.accordion{
 display: flex;
 justify-content: center;
 margin-top: 30px;
 padding: 0;
}
ul.accordion li{
 width: 50px;
 overflow: hidden;
 padding: 1px 1px 0;
 cursor: pointer;
 display: block;
 -webkit-box-shadow: 1px 3px 15px #879539;
 -moz-box-shadow: 1px 3px 15px  #879539;
 box-shadow: 1px 3px 15px  #879539;
 -webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -ms-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;
}
ul.accordion img{
 width: 300px;
}
ul.accordion li:hover{
 width: 300px;
 -webkit-box-shadow: 1px 3px 15px #c7b9e4;
 -moz-box-shadow: 1px 3px 15px #c7b9e4;
 box-shadow: 1px 3px 15px #c7b9e4;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -ms-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}
ul.accordion li:nth-child(4){
 width: 300px;
}
ul.accordion:hover li:nth-child(4){
 width: 50px;
}
ul.accordion li:nth-child(4):hover{
 width: 300px;
}</style>
Можно добавлять ещё фото, что бы по середине располагалась всё время центральное фото, замените 4, выделила в коде фиолетовым, на 5,7 и т.д. 
<li><img src="ваше фото 8" alt=""></li>
<li><img src="ваше фото 9" alt=""></li>
Лучше смотрится слайдер, если подогнать одинаковую высоту картинок.
Оранжевым выделила в коде какого размера будут раскрытые картинки
Зелёным — размер картинок в закрытом виде
Синим — цвет тени картинок
Салатовым — цвет тени картинок, при наведении курсора

Ваши комментарии:

Комментарии со спамом удаляются.