Слайдер с меняющимися фото на CSS

Owebs

29 июля 2022

Время чтения: 6 минут

Оглавление

Развернуть Свернуть

Пхи-Пхи Тайланд

Пхи-Пхи — один из самых популярных экскурсионных курортов в Таиланде. Огромное количество туристов приезжает сюда ежедневно на однодневную экскурсию — посмотреть на красивые скалы, поваляться на белоснежном песочке и покупаться в чистейшей воде, которая переливается всеми оттенками бирюзового.

Каменный лес Мадагаскар

Каменный лес Мадагаскара становится все более популярным у туристов и любителей экстрима. Здесь есть подвесные мосты и смотровые площадки, позволяющие насладиться великолепной панорамой этого сказочного места.

Большой каньон

Большой каньон — один из глубочайших каньонов в мире. Находится на плато Колорадо, штат Аризона, США, на территории национального парка «Гранд-Каньон».

Маттерхорн

Ма́ттерхорн — вершина в Пеннинских Альпах на границе Швейцарии в кантоне Вале и Италии в провинции Валле-д’Аоста. Высота вершины составляет 4478 метров над уровнем моря.

Данный слайдер полностью выполнен на CSS (свойство - animation) без использования JS и других скриптов.

Ниже представлен HTML код слайдера:

HTML:

              <div class="slideanimation">
    <div class="slideanimation-item">
        <img src="photo-1.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>
        </div>
    </div>
    <div class="slideanimation-item">
        <img src="photo-2.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>
        </div>
    </div>
    <div class="slideanimation-item">
        <img src="photo-3.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>
        </div>
    </div>
    <div class="slideanimation-item">
        <img src="photo-4.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>            
        </div>
    </div>
</div>

Далее мы берем и копируем следующие стили:

CSS:

 .slideanimation {
    width: 100%;
    height: 499px;
    position: relative;
    overflow: hidden;
    background: #111;
    margin: 15px 0;
}
.slideanimation-item {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: slideanim 40s infinite;
    pointer-events: none;
}
.slideanimation-item:nth-child(1),
.slideanimation-item:nth-child(1) img {
    animation-delay: 0;
}
.slideanimation-item:nth-child(2),
.slideanimation-item:nth-child(2) img {
    animation-delay: 10s;
}
.slideanimation-item:nth-child(3),
.slideanimation-item:nth-child(3) img {
    animation-delay: 20s;
}
.slideanimation-item:nth-child(4),
.slideanimation-item:nth-child(4) img {
    animation-delay: 30s;
}
.slideanimation-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom 40s infinite;
}
.slideanimation-item-text {
    max-width: 65%;
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: rgb(25 24 24 / 61%);
    color: #ebebeb;
    padding: 15px 25px;  
}
.slideanimation-item-text h5 {
    font-size: 25px;
    margin: 0 0 15px 0;
    color: #9fd2fb;
}
.slideanimation-item-text p {
    font-size: 16px;
    margin-bottom: 15px;
	color: white;
}
@keyframes slideanim {
    12.5%{
        opacity: 1;
        pointer-events: auto;
    }
    25%{
        opacity: 1;
        pointer-events: auto;
    }    
    37.5%{
        opacity: 0;
    }
}
@keyframes zoom {
    50%{
        transform: scale(1.3);
    }    
}
@media screen and (max-width: 1100px){
    .slideanimation-item-text{
        max-width: 75%;
    }
}
@media screen and (max-width: 456px){
    .slideanimation-item-text {
        bottom: 0;
        left: 0;
        max-width: 100%;
    }
    .slideanimation-item-text h5 {
        font-size: 18px;
    }
    .slideanimation-item-text p {
        font-size: 13px;
    }
}

Подробнее о коде:

Код работает таким образом, что на каждый из слайдов выделено по 10 секунд. Всего их 4 штуки. Следовательно, общая продолжительность анимации - 40 секунд. Данные показатели указываются в: animation: slideanim 40s infinite и animation: zoom 40s infinite.

В каждом слайде устанавливается задержка, которая указана к class - .slideanimation-item:nth-child(1), .slideanimation-item:nth-child(1) img и др.

Далее мы должны установить значения для самой анимации: slideanim:

12.5% {opacity: 1} - данный % мы получаем путем уравнения: 100 делим на количество слайдов (4 шт), далее все это делим на 2. Этот параметр отвечает за переход с полной прозрачности в видимую область.
25% {opacity: 1} - данный % мы получаем путем уравнения: 100 делим на количество слайдов (4 шт). Этот параметр отвечает за показ непрозрачного слайда.
37.5% {opacity: 0} - данный % получается при сложении двух предыдущих показателей. Он отвечает за возвращение слайда в прозрачность.

Далее мы устанавливаем значения для анимации в zoom:

50% {transform: scale(1.3)} - данный % мы получаем путем уравнения: 100 делим на количество слайдов (4 шт), далее все это умножаем на 2. Параметр отвечает за увеличение фото.

К примеру, если надо сделать анимацию для 10 слайдов, то CSS будет выглядеть следующим образом:

 @keyframes slideanim {
    5%{
        opacity: 1;
        pointer-events: auto;
    }
    10%{
        opacity: 1;
        pointer-events: auto;
    }    
    15%{
        opacity: 0;
    }
}
@keyframes zoom {
    20%{
        transform: scale(1.3);
    }    
}

Поделиться статьей:

Owebs