Слайдер с меняющимися фото на 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;
	pointer-events: none;
}
.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;
		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){
    .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;

pointer-events: none;

}

.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;

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){

.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;
		pointer-events: auto;
	}
    14.3%{
        opacity: 1;
		pointer-events: auto;
	}	
    21.5%{
        opacity: 0;
	}
}
@keyframes zoom {
    28.5%{
        transform: scale(1.3);
    }	
}

@keyframes slideanim {

7.15%{

opacity: 1;

pointer-events: auto;

}

14.3%{

opacity: 1;

pointer-events: auto;

}

21.5%{

opacity: 0;

}

@keyframes zoom {

28.5%{

transform: scale(1.3);

}

Sergey: 12.11.2023 в 14:32

не получилось... показывает четыре картинки на главной странице..

Ответить
- Alexander: 13.11.2023 в 09:40
  
  Что то не так со стилями, или что то мешает или даже старый кэш
  
  Ответить
  - Sergey: 13.11.2023 в 15:32
    
    Да скорей всего что то в самом шаблоне со стилями...
    
    Ответить
Анна: 19.06.2023 в 09:05

Отличное решение! Вы сэкономили мне время)))

Ответить
Юрий: 02.05.2023 в 22:31

Огромное Вам спасибо за Вашу работу!

Ответить
Динар: 16.12.2022 в 12:13

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

Ответить
- Alexander: 16.12.2022 в 13:53
  
  Этот слайдер не подразумевает спинер, я даже с трудом представляю, как он будет с ним выглядеть...
  
  Ответить
Владимир: 01.12.2022 в 13:11

Отличный слайдер. Подскажите, пожалуйста, как добавить стрелочки для перехода по слайдам "руками"?

Ответить
- Alexander: 01.12.2022 в 13:18
  
  Переделать весь слайдер 🙂
  Для этого другие решения, например на чекбоксах.
  
  Ответить
  - Владимир: 01.12.2022 в 13:20
    
    Нет ли у вас готового решения на css слайдер с элементами ручного перехода?
    
    Ответить
    - Alexander: 01.12.2022 в 19:14
      
      На CSS нет, а со скриптами, посмотрите в разделе, может что то понравится
      
      Ответить
Anton: 26.10.2022 в 17:30

Можно как то без этого текста? Хотелось бы сделать слайдер только без текста, спасибо!

Ответить
- Alexander: 26.10.2022 в 19:22
  
  Так просто удалите или тексты или весь их контейнер slideshow-item-text
  
  Ответить
Константин: 19.08.2022 в 12:44

Вагон респекта автору. Забрал к себе на сайт, давно искал простенький слайдер для анонсов мероприятий. Ваш подошёл прекрасно (с небольшой подгонкой). Всего вам, хорошего!

Ответить
Игорь: 31.05.2022 в 17:39

Здравствуйте, на десктопе все отлично, на телефоне все картинки в столбец выстраивает без динамики(

Ответить
- Alexander: 31.05.2022 в 18:15
  
  Не должно бы так быть.
  Первое что приходит на ум - закешировались там старые стили.
  
  Ответить
  - Игорь: 31.05.2022 в 18:24
    
    Спасибо за оперативную обратку, глюк встроенного браузера андроида, все работает! Спасибо
    
    Ответить
Melt: 05.05.2022 в 21:52

Спасибо огромное! Среди тонны ненужных похожих вариантов в интернете, ваш - просто идеален: все просто и понятно, нет нечего лишнего, не задействован js

Ответить
Veaceslav: 03.01.2022 в 13:02

Подскажите пожалуйста как можно добавить ссылку для перехода в заголовок слайдера?

Ответить
- Alexander: 03.01.2022 в 15:03
  
  Этот слайдер сделан на прозрачности.
  Чтобы добавить ссылку, нужно будет ставить в анимации z-index-ы, чтобы видимый был наверху по Z и мог кликаться.
  
  Ответить
  - Юрий: 25.03.2022 в 11:15
    
    Вопрос такой же, про ссылки внутри слайдера, не могли бы Вы привести пример?
    Спасибо
    
    Ответить
    - Alexander: 25.03.2022 в 16:16
      
      Я поправил CSS код, теперь можно делать ссылки в описании.
      
      Ответить

Пример:

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

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

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

Озеро Ирен

HTML:

CSS:

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

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

Медиа-плейер Plyr для HTML5, YouTube и Vimeo

Пошаговый слайдер

Горизонтальный таймлайн

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

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