Как правильно сверстать такой слайдер?

Question

[Александр Морозов]

Всех приветствую!

Подскажите плиз как правильно сверстать такой слайдер.

Хочу попробовать сделать такой же, но столкнулся с проблемой. Картинки изначально большего разрешения, на сайте у них задана ширина 30%. Если я задаю такую ширину для img – они уменьшаются больше чем нужно, а пространство между ними остаётся пустым (картинки не прижимаются друг к другу). Просто не понимаю как их выстроить все в один ряд.

HTML:

<div class="container-slider">
		<div class="slide-item">
			<img src="img/slide-1.jpg" alt="">
		</div>
		<div class="slide-item">
			<img src="img/slide-2.jpg" alt="">
		</div>
		<div class="slide-item">
			<img src="img/slide-5.jpg" alt="">
		</div>
		<div class="slide-item">
			<img src="img/slide-4.jpg" alt="">
		</div>
		<div class="slide-item">
			<img src="img/slide-6.jpg" alt="">
		</div>
		<div class="slide-item">
			<img src="img/slide-3.jpg" alt="">
		</div>
</div>

SASS:

.container-slider
	display: grid
	grid-template-columns: repeat(6, 1fr)

.slide-item
	width: 30%

Заранее спасибо!

Comments

[Ankhena]

Это же грид. Вы пишете 30%. Он и занимает 30% от своей "клеточки".

Answer 1

[Алексей Шелементьев]

Можно сделать с помощью Swiper слайдера. Там есть опция количества слайдов на экране