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

Пример:

Национальный Парк Йеллоустоун

Йеллоустоун — национальный парк и заповедник на северо-западе США. Он расположен на территории сразу трех штатов: Вайоминг (самая большая часть), Айдахо и Монтана.

Мальдивские Острова

Мальдивские острова – это огромный архипелаг островов вулканического происхождения и окружающих их коралловых рифов и лагун в Лаккадивском море.

Горы Шотландии

Шотландия — самая горная страна из составляющих Великобританию. Наиболее высокие горы находятся в западной части Грампианских горах.

Озеро Ирен

HTML:

<div class="slideshow">
	<div class="slideshow-item">
		<img src="photo-1.jpg" alt="">
		<div class="slideshow-item-text">
			<h5>Заголовок</h5>
			<p>Описание</p>
		</div>
	</div>
	<div class="slideshow-item">
		<img src="photo-2.jpg" alt="">
		<div class="slideshow-item-text">
			<h5>Заголовок</h5>
			<p>Описание</p>
		</div>
	</div>
	<div class="slideshow-item">
		<img src="photo-3.jpg" alt="">
		<div class="slideshow-item-text">
			<h5>Заголовок</h5>
			<p>Описание</p>
		</div>
	</div>
	<div class="slideshow-item">
		<img src="photo-4.jpg" alt="">
		<div class="slideshow-item-text">
			<h5>Заголовок</h5>
			<p>Описание</p>			
		</div>
	</div>
</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

CSS:

.slideshow {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
	background: #000;
	margin: 20px 0;
}
.slideshow-item {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: slideanim 40s infinite;
}
.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img {
    animation-delay: 0;
}
.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img {
    animation-delay: 10s;
}
.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img {
    animation-delay: 20s;
}
.slideshow-item:nth-child(4),
.slideshow-item:nth-child(4) img {
    animation-delay: 30s;
}
.slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom 40s infinite;
}
.slideshow-item-text {
    max-width: 50%;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    padding: 20px 30px;
	font-family: Verdana, sans-serif;   	
}
.slideshow-item-text h5 {
    font-size: 22px;
	margin: 0 0 10px 0;
	color: #BFE2FF;
}
.slideshow-item-text p {
    font-size: 15px;
	margin-bottom: 10px;
}
@keyframes slideanim {
    12.5%{
        opacity: 1;
	}
    25%{
        opacity: 1;
	}	
    37.5%{
        opacity: 0;
	}
}
@keyframes zoom {
    50%{
        transform: scale(1.3);
	}	
}
@media screen and (max-width: 1100px){
    .slideshow-item-text{
        max-width: 75%;
	}
}
@media screen and (max-width: 456px){
    .slideshow-item-text {
	    bottom: 0;
		left: 0;
        max-width: 100%;
	}
    .slideshow-item-text h5 {
		font-size: 18px;
	}
    .slideshow-item-text p {
		font-size: 13px;
	}
}

.slideshow {

width: 100%;

height: 500px;

position: relative;

overflow: hidden;

background: #000;

margin: 20px 0;

}

.slideshow-item {

width: 100%;

height: 100%;

position: absolute;

opacity: 0;

animation: slideanim 40s infinite;

}

.slideshow-item:nth-child(1),

.slideshow-item:nth-child(1) img {

animation-delay: 0;

}

.slideshow-item:nth-child(2),

.slideshow-item:nth-child(2) img {

animation-delay: 10s;

}

.slideshow-item:nth-child(3),

.slideshow-item:nth-child(3) img {

animation-delay: 20s;

}

.slideshow-item:nth-child(4),

.slideshow-item:nth-child(4) img {

animation-delay: 30s;

}

.slideshow-item img {

width: 100%;

height: 100%;

object-fit: cover;

animation: zoom 40s infinite;

}

.slideshow-item-text {

max-width: 50%;

position: absolute;

bottom: 20px;

left: 20px;

background-color: rgba(0,0,0,0.7);

color: #fff;

padding: 20px 30px;

font-family: Verdana, sans-serif;

}

.slideshow-item-text h5 {

font-size: 22px;

margin: 0 0 10px 0;

color: #BFE2FF;

}

.slideshow-item-text p {

font-size: 15px;

margin-bottom: 10px;

}

@keyframes slideanim {

12.5%{

opacity: 1;

}

25%{

opacity: 1;

}

37.5%{

opacity: 0;

}

@keyframes zoom {

50%{

transform: scale(1.3);

}

@media screen and (max-width: 1100px){

.slideshow-item-text{

max-width: 75%;

}

@media screen and (max-width: 456px){

.slideshow-item-text {

bottom: 0;

left: 0;

max-width: 100%;

}

.slideshow-item-text h5 {

font-size: 18px;

}

.slideshow-item-text p {

font-size: 13px;

}

Немного о коде

На показ каждого слайдера выделяется 10 секунд, а всего их 4. Поэтому общая продолжительность анимации составляет 40 секунд. Это указывается в строках animation: slideanim 40s infinite и animation: zoom 40s infinite

Для каждого слайда отдельно устанавливается задержка, это классы .slideshow-item:nth-child(1), .slideshow-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 (кол-во слайдов) x 2, при котором увеличиваем фотографию

Например, для 7-ми слайдов эти анимации будут выглядеть так:

@keyframes slideanim {
    7.15%{
        opacity: 1;
	}
    14.3%{
        opacity: 1;
	}	
    21.5%{
        opacity: 0;
	}
}
@keyframes zoom {
    28.5%{
        transform: scale(1.3);
    }	
}

@keyframes slideanim {

7.15%{

opacity: 1;

}

14.3%{

opacity: 1;

}

21.5%{

opacity: 0;

}

@keyframes zoom {

28.5%{

transform: scale(1.3);

}

Пример:

Национальный Парк Йеллоустоун

Мальдивские Острова

Горы Шотландии

Озеро Ирен

HTML:

CSS:

Немного о коде

Смотрите также:

Эффекты смены двух фотографий на CSS

Разделенные изображения

Варианты оформления jQuery UI Slider

Добавить комментарий:

Разделы:

Фоновая анимация на JS

Простые решения: