JSFiddle - React, Tailwind, and code Playground

by Vikkelas

HTML

<section class="mainSlider">
			<div class="slider-title">Our products</div>

			<div class="slider-container">

				<div class="slider-track">

					<div class="slider-item">
						<img src="https://s1.1zoom.ru/big0/52/Love_Sunrises_and_sunsets_Fingers_Hands_Heart_Sun_532758_1280x897.jpg" alt="" class="slide-image">
						<a href="#" class="description-product">
							<div class="title-product">Серьги  </div>
							<div class="property-product">белое золото, брилианты, изумруды</div>
							<div class="price-product"> P</div>
						</a>
					</div>
					<div class="slider-item">
						<img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" alt="" class="slide-image">
						<div class="description-product">
							<div class="title-product">Серьги из коллекции </div>
							<div class="property-product">белое  брилианты изумруды</div>
							<div class="price-product">0 P</div>
						</div>
					</div>
					<div class="slider-item">
						<img src="https://millionstatusov.ru/pic/statpic/all8/5e04c21a52a39.jpg" alt="" class="slide-image">
						<div class="description-product">
							<div class="title-product"> "Memories"</div>
							<div class="property-product">белое золото, брилианты, изумруды</div>
							<div class="price-product"> P</div>
						</div>
					</div>
					<div class="slider-item">
						<img src="https://www.imgonline.com.ua/examples/orange-flowers.jpg" alt="" class="slide-image">
						<div class="description-product">
							<div class="title-product">Серьги из коллекции "Memories"</div>
							<div class="property-product">белое золото, брилианты, изумруды</div>
							<div class="price-product">1</div>
						</div>
					</div>
					<div class="slider-item">
						<img src="https://avatarko.ru/img/kartinka/33/multfilm_lyagushka_32117.jpg" alt="" class="slide-image">
						<div class="description-product">
							<div class="title-product">"Memories"</div>
							<div class="property-product">белое золото, брилианты,...

CSS

.mainSlider {
	background: linear-gradient(#06050B 0%, #0B1528 100%);

}
.slider-title {
	text-align: center;
	padding: 7.9rem 0;
	color: white;
	text-transform: uppercase;
	font-family: Cremona, Arial, sans-serif;
	font-size: 4.8rem;
}

.slider-container {
	overflow: hidden;
}

.slider-track {
	display: flex;
	align-items: center;
	transition: .2s;
}

.slider-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	
}

.slide-image {
	max-width: 100%;
	
}

.description-product {
	color: white;
	padding-top: 3.7rem;
	text-align: center;
}

.title-product {
	font-size: 1.8rem;
	font-weight: 500;
}

.property-product {
	padding-top: 0.8rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: #838489;
}

.price-product {
	padding-top: 0.8rem;
	font-size: 1.8rem;
	font-weight: 500;
}

.slider-buttons {
	text-align: center;
}

JavaScript

let position = 0;
	const slidesToShow = 3;
	const slidesToScroll = 1;
	const container = document.querySelector('.slider-container');
	const track = document.querySelector('.slider-track');
	const btnPrev = document.querySelector('.btn-prev');
	const btnNext = document.querySelector('.btn-next');
	const items = document.querySelectorAll('.slider-item');
	const itemsCount = items.length;
	const itemWidth = container.clientWidth / slidesToShow;
	const movePosition = slidesToScroll * itemWidth;

	items.forEach((item) => {
		item.style.minWidth = `${itemWidth}px`;
	});
	
	btnNext.addEventListener('click', () => {
		const itemsLeft = (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
		position -= itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
		setPosition();
		checkBtns();		
	});

	btnPrev.addEventListener('click', () => {
		const itemsLeft = Math.abs(position) / itemWidth;
		position += itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
		setPosition();
		checkBtns();
		
	});

	

	const setPosition = () => {
		track.style.transform = `translateX(${position}px)`;
	};

	function checkBtns () {
		btnPrev.disabled = position === 0;
		btnNext.disabled = position <= -(itemsCount - slidesToShow) * itemWidth;
				
	}

	checkBtns();