Две и более фотогалереи на swiper

380
10 мая 2018, 06:55

Соединил два swiper слайдера и получилась неплохая фото-галерея, но столкнулся с проблемой, как её размножить до 4,6,10 на одной странице ? Создавать в js файле несколько переменных swiper не вариант, т.к. нужно неограниченное количество галерей на одной странице. Хелп

	var swiper = new Swiper('.swiper-big-gallery', { 
    speed: 600, 
    allowTouchMove: false, 
    loop: false, 
  }); 
 
	// main slides - navigation 
  var swiper2 = new Swiper('.swiper-small-gallery', { 
    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 .swiper-slide').removeClass('sm-active-slide'); 
  	$(this).addClass('sm-active-slide'); 
 
  	var navIndex = $(this).index(); 
 
	  swiper.slideTo(navIndex); // slide main slides to current nav item 
	  swiper2.slideTo(navIndex); // slide nav item to current nav item 
     
	});
.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; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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: 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"> 
      <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> -->

READ ALSO
React: Не отрабатывает onKeyPress вместе с onInput

React: Не отрабатывает onKeyPress вместе с onInput

Не могу понять почему setState не работает с связке с onInput, если же убрать onInput setState заработает, причем consolelog тоже срабатывает

147
Js: Не закрывается дочернее окно

Js: Не закрывается дочернее окно

Помогите, пожалуйстаПри нажатии на ссылку в родительском окне программно создаётся новое окно в котором создаётся кнопка "Закончить"

152
strpos() не видит большие буквы

strpos() не видит большие буквы

Проблема в том что если даже слово {keyword} содержит большие буквы он видит как с маленькими, но мне этого не нужно, мне нужно чтобы выполнили...

163
Не работает пагинация на сайте WordPress

Не работает пагинация на сайте WordPress

Вот страница с пагинацией

146