Swiper.js 活动幻灯片到达数据属性

Posted 2023-05-08

【中文标题】Swiper.js 活动幻灯片到达数据属性

【英文标题】：Swiper.js active slide reach data attribute

【发布时间】：2021-12-16 20:27:37

【问题描述】：

我找不到问题的解决方案。我有一个包含更多 swiper.js 滑块的页面。 我尝试访问刚刚更改的幻灯片的数据属性，但我毫无防备。

<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>

【参考方案1】：

您的想法与swiper API 无关（您应该使用自定义 javascript）。

slideChangeTransitionEnd: function () 
           console.log($(this));

this 无效jquery selector。

一种解决方案是使用swiper apislides[]（数组）和realIndex。

  on: 
    realIndexChange: function () 
      let index = this.realIndex + 1; /* slide 1 => slides[1] */
      let current_data = this.slides[index].dataset.city;
      console.log(current_data);
    
  

演示

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>