Создаем карусель только на CSS3

В этой карусели изображений вообще нет никакого JavaScript! Никаких плагинов jQuery. Никакой хитрости.
Всего лишь пара новых свойств CSS, с которыми мы проэкспериментировали, а также базовый HTML.

Шаг 1. HTML разметка

Итак, для начала нам нужно сосредоточиться на HTML-разметке.
Навигацию, состоящую из изображений, расположим слева, а галерею больших изображений, которая позволяет нам прокручивать каждое изображение индивидуально, разместим справа.
Организуем разметку следующим образом:

<div class="wrapper_carousel"> 
  <nav class="lil-nav"> 
    <a class="carousel" href="#image-1"> 
      <img class="lil-nav__img" src="/images/slides/01.jpg" alt="slide1" /> 
    </a> 
    <a class="carousel" href="#image-2"> 
      <img class="lil-nav__img" src="/images/slides/02.jpg" alt="slide2" /> 
    </a> 
    <a class="carousel" href="#image-3"> 
      <img class="lil-nav__img" src="/images/slides/03.jpg" alt="slide3" /> 
    </a> 
    <!-- дополнительные изображения -- > 
  </nav> 
  <div class="gallery"> 
    <img id="image-1" class="gallery__img" src="/images/slides/01.jpg" alt="slide1" /> 
    <img id="image-2" class="gallery__img" src="/images/slides/02.jpg" alt="slide2" /> 
    <img id="image-3" class="gallery__img" src="/images/slides/03.jpg" alt="slide3" /> 
    <!-- дополнительные изображения -- > 
  </div> 
</div>

Переходим к следующему, наиболее интересному, шагу.

Шаг 2. CSS разметка

Сделаем размер больших изображений галереи равным полному размеру экрана по высоте и масштабируемым по ширине.
Маленькие навигационные изображения сделаем также с прокруткой по вертикали.
Для удобства еще одна маленькая деталь, которую мы могли бы здесь сделать, - это применить фильтр к элементам навигации, чтобы сделать их черно-белыми, а затем раскрасить их при наведении.
Вот и все! У нас есть карусель, которая не требует загружать библиотеку JavaScript или писать кучу кода больше, чем нам действительно нужно.

img {
  display: block;
  max-width: 100%;
}
.wrapper_carousel {
  overflow: hidden;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: 10px;
}
.gallery {
  overflow: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.gallery__img {
  scroll-snap-align: start;
  margin-bottom: 10px;
  min-height: 100vh;
  object-fit: cover;
}
.lil-nav {
  overflow-y: scroll;
  overflow-x: hidden;
}
a.carousel {
    height: 200px;
    display: flex;
    margin-bottom: 10px;
}
.lil-nav__img {
  object-fit: cover;
  filter: saturate(0);
  transition: 0.3s ease all;
}
.lil-nav__img:hover {
    transform: scale(1.05);
    filter: saturate(1);
}

Шаг 3. Сделаем нашу карусель адаптивной

Давайте пойдем еще дальше и сделаем эту карусель адаптивной.
Мы хотим изменить порядок нашей сетки, переместив все наши текущие стили в медиа-запрос, который активируется только на больших экранах с шириной от 1200 пикселей.

img {
	display: block;
	max-width: 100%;
}
.wrapper_carousel {
	overflow: hidden;
	height: 100vh;
	display: grid;
	grid-template-rows: 2fr 1fr;
	grid-gap: 10px;
}
@media screen and (min-width: 1200px){ 
	.wrapper_carousel{
		grid-template-columns: 1fr 5fr;
		grid-template-rows: auto;
	}
}
.gallery {
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	display: flex;
}
@media screen and (min-width: 1200px) {
	 .gallery {
		 display: block;
		 overflow-y: scroll;
		 overflow-x: hidden;
		 scroll-snap-type: y mandatory;
	 }
}
.gallery__img {
	scroll-snap-align: start;
	margin-bottom: 10px;
	min-width: 100vw;
	object-fit: cover;
}
@media screen and (min-width: 1200px) {
	 .gallery__img {
		 min-width: auto;
		 min-height: 100vh;
	 }
}
.lil-nav {
	overflow-x: scroll;
	overflow-y: hidden;
	display: flex;
	grid-row-start: 2;
}
@media screen and (min-width: 1200px) {
	.lil-nav {
		overflow-y: scroll;
		overflow-x: hidden;
		display: block;
		grid-row-start: auto;
	}
}
a.carousel {
	display: flex;
    min-width: 33vw;
    margin-right: 10px;
}
@media screen and (min-width: 1200px) {
	a.carousel {
		margin-bottom: 10px;
		min-height: 200px;
		min-width: 100%;
	}
}
.lil-nav__img {
	object-fit: cover;
	filter: saturate(0);
	transition: 0.3s ease all;
}
.lil-nav__img:hover {
	transform: scale(1.05);
    filter: saturate(1);
  }

А теперь, посмотрите, что получилось в результате
Попробуйте изменить размер окна браузера и вы увидите, как меняется разметка при уменьшении ширины окна менее 1200px. А, прокрутка картинок навигации меняется с вертикальной на горизонтальную.

Остались вопросы? Или хотите получить что-то необычное?
Пишите нам на Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. и мы вам обязательно поможем.

WEB дизайн

Лайфхаки для разработчиков

Создаем карусель только на CSS3

Шаг 1. HTML разметка

Шаг 2. CSS разметка

Шаг 3. Сделаем нашу карусель адаптивной

Обратная связь

Напишите нам