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

Слайдер выполнен без применения скриптов с использованием СSS-свойства animation

Пример:

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

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

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

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

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

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

Озеро Ирен

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

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 01.12.2020 / Обновлено: 13.05.2025
Рубрики: Слайдеры и карусели, Фото, аудио и видео
Метки: CSS, Авторское, Фото
36954 просмотра

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

Эффект волны на изображении

Волна прокатывается по изображению при движении курсора мыши

WebGL слайдер фотографий

Слайдер на WebGL с красивой сменой фотографий по клику

Наклонная галерея

Небольшой скрипт на jQuery с наклонной каруселью фотографий

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

Ваш комментарий отправлен!

Игорь: 13.10.2024 в 08:16

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

Ответить
- Alexander: 13.10.2024 в 22:28
  
  в классе .slideshow-item-text меняем
  max-width: 50%;
  на
  width: calc(100% - 40px);
  
  а для заголовка .slideshow-item-text h5
  добавляем: text-align: center;
  
  Ответить
Виталий: 11.09.2024 в 23:48

Не пойму, где поправить, чтобы уменьшить размер и показать фото по центру:
.slideshow {
width: 80%; /* было 100% */
Уменьшилось, но прижимается к левому краю экрана.

Ответить
- Alexander: 12.09.2024 в 08:16
  
  Просто поместите сам слайдер в контейнер с нужной шириной, он резиновый (100%).
  Можно задать высоту еще не в точках, а в пропорции к ширине (вместо height: 500px; - aspect-ratio: 16/9; )
  Или вам нужно, чтобы фото увеличивалось за рамки контейнера, а не приближалось в нем, как сейчас?
  
  Ответить
Александр: 06.06.2024 в 11:31

Перепробовал все браузеры, постоянно чистил кеш, перепробовал все форматы картинок - всё равно выстраиваются столбиком и не переключаются. Впервые такая неудача с Вашего блога. Борюсь..
А по примеру вижу, что отличный слайдер.
Где искать причину - пока не понимаю.

Ответить
- Alexander: 06.06.2024 в 17:45
  
  Проблема скорее всего в редакторе WP, который правит любой код на свой лад и может тем самым мешать.
  Если не получится, напишите в ВК мне (альтернативный мессенджер на данный момент не сделал еще себе)
  
  Ответить
  - Александр: 07.06.2024 в 10:05
    
    Уважаемый Alexander! Прошу прощения за то, что вчера из-за собственной невнимательности отнял уВас столько времени и терпения.
    На самом деле все Ваши решения на этом проекте глубоко продуманы и профессиональны. И, если нам относиться к ним внимательно и последовательно, то результат будет всегда положительным.
    Причина моей ошибки вчера именно в моей невнимательности. Я содержу все файлы моих сайтов на одном хостинге и, мало того, в одной директории. Так вот, добавлял записи в файл стилей я грамотно и последовательно. Но только в папку другого моего сайта. Поэтому и так долго не мог получить нужного результата.
    В конце концов, когда понял это, всё получилось на "раз-два-три".
    Ещё раз: "Простите!" И Огромное Спасибо Вам за Ваши очень качественные работы! Буду пользоваться, рекомендовать и , по-возможности, помогать Вашему блогу.
    
    Ответить
    - Alexander: 09.06.2024 в 09:35
      
      Ничего страшного, у меня когда время есть, даже интересно посмотреть что не так, и как это поправить 🙂
      
      Ответить
- Александр: 06.06.2024 в 18:31
  
  Кажется, я понял, в чём дело! Какое-то время у меня не работали gif - картинки. После долгих поисков опытным путём удалось понять, что NextGEN Gallery оптимизирует картинки, и те потом не до конца проявляют свои свойства.
  Я попробовал загрузить картинки напрямую, и всё стало получаться.
  Сейчас попробую сделать это с картинками для Вашего слайдера.
  
  Ответить
Abdu: 15.02.2024 в 10:26

Отличный слайдер! Большое спасибо! Я так долго искал.
Оценка 10/10

Ответить
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:

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

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

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

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