Swiper.js active slide reach data attribute - custom-data-attribute

Question

I can't find a solution to a problem. I have a page with more swiper.js sliders.
I try to reach the data attributes of the just changed slide, but I get undefended.
<h1>Slider 1</h1>
<div class="mySwiper swiper-h" id="id1">
<div class="swiper-wrapper">
<div class="swiper-slide" data-contetntdata1="contentdata1" data-contetntdata2="contentdata2">Content</div>
<div class="swiper-slide" data-contetntdata1="contentdata1" data-contetntdata2="contentdata2">Content</div>
<div class="swiper-slide" data-contetntdata1="contentdata1" data-contetntdata2="contentdata2">Content</div>
</div>
</div>
<h1>Slider 2</h1>
<div class="mySwiper swiper-h" id="id1">
<div class="swiper-wrapper">
<div class="swiper-slide" data-contetntData1="contentDataTxt1" data-contetntdata2="contentDataTxt2">Content</div>
<div class="swiper-slide" data-contetntData1="contentDataTxt1" data-contetntdata2="contentDataTxt2">Content</div>
<div class="swiper-slide" data-contetntData1="contentDataTxt1" data-contetntdata2="contentDataTxt2">Content</div>
</div>
</div>
<script>
const swiper = new Swiper(".mySwiper", {
on: {
slideChangeTransitionEnd: function () {
*console.log($(this)).find('.swiper-slide-activ').data('contetntData1');
console.log($(this)).find('.swiper-slide-activ').data('contetntData2');*
},
},
});
</script>

Answer 1

One solution is to use swiper api slides[] (array) and realIndex (And get the data attribute value by custom JS dataset).
on: {
realIndexChange: function () {
let index = this.realIndex + 1; /* slide 1 => slides[1] */
let current_data = this.slides[index].dataset.city;
console.log(current_data);
}
}
Demo (Jquery)
let swiperCMSglobalSetting = {
// Optional parameters
slidesPerView: 1,
// Enable lazy loading
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
realIndexChange: function () {
let index = this.realIndex + 1; /* slide 1 => slides[1] */
let current_data = this.slides[index].dataset.city;
$("#status").text(current_data);
},
}
}
$(".swiper").each(function(index, element){
var $this = $(this);
var swiper = new Swiper(this, swiperCMSglobalSetting);
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<!-- Slider main container -->
<h1>status: <span id="status"></span></h1>
<div class="swiper one">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-city="london _ 1.1">london _ 1.1</div>
<div class="swiper-slide" data-city="paris _ 1.2">paris _ 1.2</div>
<div class="swiper-slide" data-city="moscow _ 1.3">moscow _ 1.3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<hr>
<!-- Slider main container -->
<div class="swiper two">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-city="dublin _ 2.1">dublin _ 2.1</div>
<div class="swiper-slide" data-city="amsterdam _ 2.2">amsterdam _ 2.2</div>
<div class="swiper-slide" data-city="madrid _ 2.3">madrid _ 2.3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>