JSFiddle - React, Tailwind, and code Playground

by Nilambar Sharma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.js"></script>
<div class="mediamodal">
	<div class="mediamodal-content swiper-container">
		<div class="swiper-wrapper">

			<div class="swiper-slide">
				<div class="mediamodal-main">
					<div class="mediamodal-media"><img src="https://picsum.photos/id/1001/600/400" alt=""></div>
					<div class="mediamodal-info tabs-container">
						<header><h2 class="mediamodal-title">Title here</h2></header>
					</div>
				</div>
			</div><!-- .swiper-slide -->
			<div class="swiper-slide">
				<div class="mediamodal-main">
					<div class="mediamodal-media"><img src="https://picsum.photos/id/1002/600/400" alt=""></div>
					<div class="mediamodal-info tabs-container">
						<header><h2 class="mediamodal-title">Title here</h2></header>
					</div>
				</div>
			</div><!-- .swiper-slide -->
			<div class="swiper-slide">
				<div class="mediamodal-main">
					<div class="mediamodal-media"><img src="https://picsum.photos/id/1003/600/400" alt=""></div>
					<div class="mediamodal-info tabs-container">
						<header><h2 class="mediamodal-title">Title here</h2></header>
					</div>
				</div>
			</div><!-- .swiper-slide -->


		</div>
	</div>
	<div class="mediamodal-nav swiper-container">
		<a class="mediamodal-nav-prev">Prev</a>
		<div class="mediamodal-nav-inner">

			<div class="swiper-wrapper">
				<a class="mediamodal-nav-item swiper-slide">
					<img src="https://picsum.photos/id/1001/100/100" alt="">
				</a>
				<a class="mediamodal-nav-item swiper-slide">
					<img src="https://picsum.photos/id/1002/100/100" alt="">
				</a>
				<a class="mediamodal-nav-item swiper-slide">
					<img src="https://picsum.photos/id/1003/100/100" alt="">
				</a>
			</div>

		</div>
		<a class="mediamodal-nav-next">Next</a>
	</div>

</div>

SASS

.mediamodal {

	&-main {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 30px;
		max-height: 90vh;
		overflow-y: scroll;
	}

		&-media {
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(100% - 360px);

			img {
				border-radius: 6px;
			}
		}

		&-info {
			width: 330px;
		}

			&-title {
				padding-right: 35px;
			}

			&-credit {
				font-family: $sans-serif;
				color: $text-medium;
			}


	&-nav {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 15px 30px;
		background: $ui-light;

		&-next,
		&-prev {
			font-size: 40px;
			color: $text-medium;
			svg {
				width: 30px;
				height: 21px;
			}
		}

		&-prev {
			margin-right: 24px;
		}

		&-next {
			margin-left: 24px;
		}

		&-inner {
			width: calc(100% - 110px);
			overflow: hidden;
		}

		&-item {
			display: flex;
			margin-right: 24px;
			width: 50px !important;
			height: 50px;
			opacity: .75;
			border-radius: 6px;
			border: 3px solid transparent;
			overflow: hidden;

			&:hover,
			&:focus {
				opacity: 1;
			}

			&.swiper-slide-thumb-active {
				opacity: 1;
				border: 3px solid $orange;
			}

			img {
				max-width: 50px;
				max-height: 50px;
				width: auto;
				height: auto;
			}
		}
	}

}

JavaScript

const galleryThumbs = new Swiper(".mediamodal-nav .mediamodal-nav-inner", {
      spaceBetween: 0,
      slidesPerView: "auto",
      observer: true,
      observeParents: true,
      loop: false,
      freeMode: true,
      lazy: false,
      preloadImages: false,
      centeredSlides: false,
      allowTouchMove: true,
    });
const galleryTop = new Swiper(".mediamodal-content", {
	spaceBetween: 0,
	loop: false,
	observer: true,
	observeParents: true,
	allowTouchMove: false,
	lazy: false,
	thumbs: {
		swiper: galleryThumbs,
	},
	effect: "fade",
	fadeEffect: {
		crossFade: true,
	},
	navigation: {
		nextEl: ".mediamodal-nav-next",
		prevEl: ".mediamodal-nav-prev",
	}
});