Item: Swiper vertical thumbnails
Rating: 3.4
Author: Grawl

134 Downloads
3,684 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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;

Comments

More from Grawl

Swiper vertical thumbnails

In this example below you will see how to do a Swiper vertical thumbnails with some HTML / CSS and Javascript

Technologies

Comments

More from Grawl

A Pen by Даниил Пронин

Fill background to the left of max-width container

largest image srcset item

A Pen by Даниил Пронин

You Might Also Like

svg sprite question

A Pen by Kshaunish

Sign Up

Simple Column Chart

Deck of CSS Playing Cards with Shuffling

Dribbble Invitation Uploader

A Pen by Matt Bengston

CSS FizzBuzz