Swiper content slider

Html

<div class="content-slider" data-reveal="y-1">
	<div class="content-slider__wrap" data-swiper-container>
		<div class="swiper-wrapper">
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1008/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1023/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1029/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1033/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1036/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1044/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1045/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
			<div class="content-slider__item swiper-slide">
				<div class="content-slider__content">
					<img src="https://picsum.photos/id/1047/300/400" class="content-slider__img" />
					<div class="content-slider__title">
						<span>Slide item</span>
					</div>
				</div>
			</div>
		</div>
		<div class="swiper-scrollbar"></div>
	</div>
	<div class="container" data-container></div>
</div>

Scss

		
// local var
$slide-height: 340px;
$slide-width: 270px;

.content-slider {
	// slider wrap
	&__wrap {
		margin-top: 2rem;
		position: relative;
		overflow: hidden;
		padding-bottom: 4.5rem;
		cursor: grab;
	}
	// slider item
	&__item {
		height: $slide-height;
		width: $slide-width;
		display: inline-block;
		margin-right: 3rem;
		overflow: hidden;
	}
	// slider content
	&__content {
		position: relative;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	// opacity bg
	&__content:after {
		content: '';
		position: absolute;
		background-color: transparent;
		background-image: linear-gradient(transparent, $color-black);
		width: 100%;
		height: 50%;
		bottom: 0;
		left: 0;
		opacity: 0.8;
		z-index: 2;
	}
	// hover
	&__content:hover {
		.content-slider__img {
			transform: scale(1.06);
		}
	}
	// slider img
	&__img {
		position: absolute;
		z-index: 1;
		transition: $transition;
	}
	// slider title
	&__title {
		position: absolute;
		bottom: 2rem;
		left: 1rem;
		right: 1rem;
		z-index: 3;
		height: 5rem;
	}

	&__title span {
		color: $color-white;
		font-size: 2rem;
	}
}
/////// swiper scrollbar
.swiper-scrollbar {
	border-radius: 1rem;
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	-ms-touch-action: none;
	background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
	position: absolute;
	left: 0;
	bottom: .3rem;
	z-index: 4;
	height: .4rem;
	width: 98%;
	max-width: 140rem;
}

.swiper-container-vertical > .swiper-scrollbar {
	position: absolute;
	right: .3rem;
	top: 1%;
	z-index: 50;
	width: .5rem;
	height: 98%;
}

.swiper-scrollbar-drag {
	height: .4rem;
}

@include viewport-small {
	.content-slider__wrap {
		margin-top: 1.5rem;
		padding-bottom: 5rem;
	}
}

JavaScript

// import swiper
import Swiper from 'swiper';

// init swiper
let slideContainer = '[data-swiper-container]';
let swiper = new Swiper(slideContainer, {
	slidesPerView: 'auto',
	freeMode: true,
	observer: true,
	observeParents: true,
	scrollbar: {
		el: '.swiper-scrollbar',
		hide: false
	}
});