<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Swiper vertical thumbnails</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="Gallery swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/1"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/2"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/3"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/4"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/5"/></div>
</div>
</div>
<div class="Thumbs swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/1"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/2"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/3"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/4"/></div>
<div class="swiper-slide"><img src="http://lorempixel.com/1200/1200/nature/5"/></div>
</div>
</div>
</div>
<p>Change <code>centeredSlides</code> to <code>false</code> in <code>galleryThumbs</code>, and navigation will be broken.</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Grawl/swiper-vertical-thumbnails-jmbway */
.wrapper {
height: 500px;
display: flex;
flex-direction: row;
}
.swiper-slide img {
display: block;
height: 100%;
width: 100%;
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
.Thumbs {
flex-basis: 100px;
}
.Thumbs .swiper-slide {
opacity: 0.4;
}
.Thumbs .swiper-slide-active {
opacity: 1;
}
/*Downloaded from https://www.codeseek.co/Grawl/swiper-vertical-thumbnails-jmbway */
var galleryTop = new Swiper('.Gallery', {
direction: 'vertical',
spaceBetween: 10
});
var galleryThumbs = new Swiper('.Thumbs', {
direction: 'vertical',
spaceBetween: 10,
// loop: true, bug too
centeredSlides: true,
slidesPerView: 5,
touchRatio: 0.2,
slideToClickedSlide: true
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
jQuery
v3.1.1
