Swiper.js active slide reach 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>

Ezra Siton · Accepted Answer · 2022-10-02T08:50:26.727

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>

Swiper.js active slide reach data attribute

1 Answers1