jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
<div class="slider-1">
  <!-- Галерея больших фото -->
  <div class="swiper-big-gallery swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <span class="sw-pg-img" style="background-image: url(http://bipbap.ru/wp-content/uploads/2017/09/1kgwYBuQw7t5etDwP9o1XE9H-640x410.jpeg);"></span>
      </div>
      <div class="swiper-slide">
        <span class="sw-pg-img" style="background-image: url(http://bipbap.ru/wp-content/uploads/2017/09/0_838c4_c99493f3_XXL-640x384.jpg);"></span>
      </div>
      <div class="swiper-slide">
        <span class="sw-pg-img" style="background-image: url(http://lifeglobe.net/x/entry/208/1-0.jpeg);"></span>
      </div>
    </div>

  </div>

  <!-- Галерея маленьких фото -->
  <div class="swiper-small-gallery swiper-container">
    <div class="swiper-wrapper">
      <!-- sm-active-slide - активный айтем при старте -->
      <div class="swiper-slide sm-active-slide">
        <span class="sw-smg-img" style="background-image: url(http://bipbap.ru/wp-content/uploads/2017/09/1kgwYBuQw7t5etDwP9o1XE9H-640x410.jpeg);"></span>
      </div>
      <div class="swiper-slide">
        <span class="sw-smg-img" style="background-image: url(http://bipbap.ru/wp-content/uploads/2017/09/0_838c4_c99493f3_XXL-640x384.jpg);"></span>
      </div>
      <div class="swiper-slide">
        <span class="sw-smg-img" style="background-image: url(http://lifeglobe.net/x/entry/208/1-0.jpeg);"></span>
      </div>
    </div>
  </div>
</div>

Второй слайдер

<div class="slider-2">
  <div class="swiper-big-gallery swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <span class="sw-pg-img" style="background-image:...

CSS

.swiper-big-gallery {
  height: 300px;
  width: 400px;
}

.sw-pg-img {
  width: 100%;
  height: 100%;
  background: green;
  position: absolute;
  left: 0;
  top: 0;
}

.swiper-small-gallery {
  height: 100px;
  width: 400px;
}

.sw-smg-img {
  background: blue;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.swiper-small-gallery .swiper-slide.sm-active-slide .sw-smg-img::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  content: '';
  height: 100%;
  border: 3px solid green;
  box-sizing: border-box;
}

JavaScript

if ($('.swiper-big-gallery').length > 0) { //some-slider-wrap-in
    var swiperBigInstances = [];
    $(".swiper-big-gallery").each(function(index, element){ //some-slider-wrap-in
        const $this = $(this);
        $this.addClass("instancebig-" + index); //instance need to be unique (ex: some-slider)
        swiperBigInstances[index] = new Swiper(".instancebig-" + index, { //instance need to be unique (ex: some-slider)
            // your settings ...
            speed: 600,
            allowTouchMove: false,
            loop: false,
        });
    });
}


if ($('.swiper-small-gallery').length > 0) { //some-slider-wrap-in
    var swiperInstances = [];
    $(".swiper-small-gallery").each(function(index, element){ //some-slider-wrap-in
        const $this = $(this);
        $this.addClass("instance-" + index); //instance need to be unique (ex: some-slider)
        swiperInstances[index] = new Swiper(".instance-" + index, { //instance need to be unique (ex: some-slider)
            // your settings ...
            speed: 600,
            loop: false,
            slidesPerView: 4,
            shortSwipes: false,
            spaceBetween: 4,
            breakpoints: {
              480: {
                slidesPerView: 2,
              },
              650: {
                slidesPerView: 3,
              },
              800: {
                slidesPerView: 4,
              },
            },
        });
    });
}
	
  // for active Year
	var activeYear;


  // switch top slides when clicked to bottom time line element
  $('.swiper-small-gallery .swiper-slide').on('click', function() { 
  	// Добавляем класс к выбранному слайдеру 
    $('.swiper-small-gallery').removeClass('activeSlider');
 		let activeSlider = $(this).parent().parent();
    let sliderIndex = activeSlider.index('.swiper-small-gallery');
    activeSlider.addClass('activeSlider');
    
    
  	$('.swiper-small-gallery.activeSlider .swiper-slide').removeClass('sm-active-slide');
 ...