Есть четыре картинки, например, времена года.
Если мы наводим мышкой на изображение, оно разворачивается и занимает большее пространство.
Сделаем слайдер на flex верстке.
Для начала зададим каркас.
Напишем див с классом slider, внутри будут item с четырьмя картинками pic1,2,3,4.
Текст к item ,зададим лето, осень, зима и весна внутри тега span.
1 2 3 4 5 6 |
<div class="slider"> <div class="item pic1"><span>winter</span></div> <div class="item pic2"><span>spring</span></div> <div class="item pic3"><span>summer</span></div> <div class="item pic4"><span>autumn</span></div> </div> |
Стилизуем слайдер на flex.
Укажем классу slider свойство display: flex.
В центре сделаем
justify-content: center.
align-items: center.
Перейдем к классу item и добавим фиолетовую рамку border: 3px solid #b641b0.
Все элементы делаем display: flex и по центру.
Высота элементов будет во весь экран height: 100vh.
Каждый элемент будет занимать 25 процентов экрана flex-basis: 25%.
Когда будет наводит мышкой &:hover на элемент item его размер будет увеличиваться до flex-basis: 75%.
Добавим плавности изменения свойством transition: all .5s.
Сделаем текст в теге span белого цвета и размер установим font-size: 5rem.
Установим у текста синюю тень text-shadow: 0px 0px 30px blue.
Добавим картинки к классу pic.
Для первого изображения пропишем путь background-image: url («.../img/11.jpg») и сделаем во всю ширину background-size: cover, остальные pic продублируем по порядку.
Проверяем в браузере, получился резиновый слайдер, под любой размер экрана.
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 |
.slider display: flex justify-content: center align-items: center .item height: 100vh display: flex justify-content: center align-items: center border: 3px solid #b641b0 flex-basis: 25% transition: all .5s &:hover flex-basis: 75% span color: #fff font-size: 5rem text-shadow: 0px 0px 30px blue .pic1 background-image: url("../img/11.jpg") background-size: cover .pic2 background-image: url("../img/22.jpg") background-size: cover .pic3 background-image: url("../img/33.jpg") background-size: cover .pic4 background-image: url("../img/44.jpg") background-size: cover |
Адаптируем слайдер к маленьким экранам.
Сделаем slider по горизонтали.
Зайдем в файл media.sass и для экранов @media only screen and (max-width : 768px) применим свойство к слайдеру порядок следования элементов flex-flow: column.
Для item делаем ширину сто процентов. Высоту height: 25%.
При наведении flex-grow: 30%
Код в media.sass.
1 2 3 4 5 6 7 8 9 |
@media only screen and (max-width : 768px) .slider height: 100vh flex-flow: column .item width: 100% height: 25% &:hover flex-grow: 30% |