Как я могу изменить содержимое на основе текущего индекса данных слайда с помощью swiper. js

Question

Я новичок в Swiper Вот один из лучших каркасов, которые я когда-либо использовал, в настоящее время я хочу создать связь между двумя тегами div, 1 тег - это содержимое каждого слайда , 1 тег - это функция слайдов, когда активный слайд покажет содержание этого слайда, как я могу это сделать?

var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true
  },
  pagination: {
    el: ".swiper-pagination"
  }
});

.items_content-2, .items_content-3 {
 display : none;
}
.picture img {
  width : 100%;
  height : 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<div class="content">
	<div class="items_content-1">
		Slide-1
	</div>
	<div class="items_content-2">
		Slide-2
	</div>
	<div class="items_content-3">
		Slide-3
	</div>
</div>
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="picture one">
				<img src="https://source.unsplash.com/random?sig=52" alt="">
			</div>
		</div>
		<div class="swiper-slide">
			<div class="picture">
				<img src="https://source.unsplash.com/random?sig=24" alt="">
			</div>
		</div>
		<div class="swiper-slide">
			<div class="picture">
				<img src="https://source.unsplash.com/random?sig=53" alt="">
			</div>
		</div>
	</div>
</div>

Answer 1

Можно объединить два свайпера:

var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true
  },
  pagination: {
    el: ".swiper-pagination"
  }
});

   var swiper2 = new Swiper(".swiper-container2", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true
  },
  pagination: {
    el: ".swiper-pagination"
  }
});
swiper2.params.control = swiper;
swiper.params.control = swiper2;

.picture img {
  width : 100%;
  height : 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet" />

<!-- first swiper -->
<div class="swiper-container2">
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="items_content-1">
            Slide-1
        </div>
    </div>
    <div class="swiper-slide">
        <div class="items_content-2">
            Slide-2
        </div>
    </div>
    <div class="swiper-slide">
        <div class="items_content-3">
            Slide-3
        </div>
    </div>
</div>
</div>

<!-- second swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="picture one">
            <img src="https://source.unsplash.com/random?sig=52" alt="">
        </div>
    </div>
    <div class="swiper-slide">
        <div class="picture">
            <img src="https://source.unsplash.com/random?sig=24" alt="">
        </div>
    </div>
    <div class="swiper-slide">
        <div class="picture">
            <img src="https://source.unsplash.com/random?sig=53" alt="">
        </div>
    </div>
</div>
</div>