时间戳

首页 > 解决方案 > Swiper.js 活动幻灯片到达数据属性

custom-data-attribute - Swiper.js 活动幻灯片到达数据属性

问题描述

我找不到问题的解决方案。我有一个包含更多 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>

标签： custom-data-attributeswiper.js

解决方案

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

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

this不是有效的jquery 选择器。

一种解决方案是使用swiper api slides[]（数组）和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>

推荐阅读