如何檢測 swiper js 中的當前幻燈片？

Question

為 slider 使用 swiper js 並希望檢測當前圖像/幻燈片。 我如何用 HTML 和 JS 檢測？ 任何想法？

<div class="swiper-container">
    <div class="swiper-wrapper" align="center">
        <div class="swiper-slide">
            <img src="images/card_gold.png" width="80%" align="middle" onclick="desc(\'' + card1 + '\')">
        </div>
        <div class="swiper-slide">
            <img src="images/card_platinum.png" width="80%" align="middle" onclick="desc(\'' + card2 + '\')">
        </div>
        <div class="swiper-slide">
            <img src="images/card_silver.png" width="80%" align="middle" onclick="desc(\'' + card3 + '\')">
        </div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

Answer 1

它很容易。 只需使用這個：

swiper.activeIndex

Answer 2

據我從他們的演示中看到，當前幻燈片在當前幻燈片元素上始終具有.swiper-slide-active類。

您可以使用 jQuery 選擇器從活動幻燈片中獲取屬性。 這是我獲取其圖像源的示例：

$('.swiper-slide-active img').attr('src')

Answer 3

截至 2016 年 5 月，他們添加了 realIndex 屬性！

swiper.realIndex

https://github.com/nolimits4web/Swiper/pull/1697

注意：

• 屬性作為字符串返回
• 屬性以 0 開頭，與循環模式中的 activeIndex 不同，在我的情況下，它以 1 開頭

Answer 4

擴展已經引用realIndex屬性的答案，這里是一種通過使用realIndex以及slides屬性（包含實例的所有幻燈片的數組）獲取幻燈片元素來獲取當前幻燈片元素的方法：

let index_currentSlide = instance_swiper.realIndex;
let currentSlide = instance_swiper.slides[index_currentSlide]

您可以在構造實例時利用它（例如）在發生slideChange事件時獲取當前幻燈片並操作元素：

const instance_swiper = new Swiper(".swiper-container", {
  on: {
    slideChange: function () {
      let index_currentSlide = instance_swiper.realIndex,
      currentSlide = instance_swiper.slides[index_currentSlide]
      //
      currentSlide.style.background = "red";
    },
  },
});

Answer 5

如果你使用的是 React.js，那么你可以如何獲得 activeIndex：

const swiperRef = useRef(null)
console.log(swiperRef.current.swiper.realIndex)

  const [currentSlide, setCurrentSlide] = useState(0);

  const [isLeftDisabled, setIsLeftDisabled] = useState(true);
  const [isRightDisabled, setIsRightDisabled] = useState(false);

  const updateIndex = useCallback(
    () => setCurrentSlide(swiperRef.current.swiper.realIndex),
    []
  );

// Add eventlisteners for swiper after initializing
  useEffect(() => {
    const swiperInstance = swiperRef.current.swiper;

    if (swiperInstance) {
      swiperInstance.on("slideChange", updateIndex);
    }

    return () => {
      if (swiperInstance) {
        swiperInstance.off("slideChange", updateIndex);
      }
    };
  }, [updateIndex]);


<Swiper
        className="swiper swiper-17-1"
        modules={[Pagination]}
        pagination={{
          type: "fraction",
        }}
        slidesPerView={1}
        ref={swiperRef}
      />

關鍵是你需要清理 evenlistener！！！！