JSFiddle - React, Tailwind, and code Playground

by iforcode

HTML

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
 <!-- Swiper -->
<body>
	<div class="swiper-container gallery-top">
			<div class="swiper-wrapper">
					<div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
			</div>
			<!-- Add Arrows -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
	</div>
	<div class="swiper-container gallery-thumbs">
			<div class="swiper-wrapper">
					<div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
			</div>
	</div>
</body>

CSS

body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color:#000;
	margin: 0;
	padding: 0;
	height: 300px;
}
.swiper-container {
		width: 100%;
		height: 300px;
		margin: 20px auto;
}

.swiper-slide-container {
  text-align: center;
	font-size: 18px;
	background: #fff;
  height:100%;
  max-width: 600px;
  margin:auto;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
}

.gallery-top {
		height: 80%;
		width: 100%;
}
.gallery-thumbs {
		height: 20%;
		box-sizing: border-box;
		padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
		width: 20%;
		height: 100%;
		opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
		opacity: 1;
}

JavaScript

var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
	 		loop: true
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
			//loop: true,
			//loopedSlides: 4
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;