时间戳

首页 > 解决方案 > 每次滑动 SwiperJS 都会更改不同的 HTML 元素

javascript - 每次滑动 SwiperJS 都会更改不同的 HTML 元素

问题描述

我对javascript很陌生。我目前有一个普通的 html 页面，我正在使用一个 swiper JS 元素。目前这是我的代码：

<head>
<link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
</head>

<body>
<!-- Swiper -->
<div class="swiper-container mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>        
  </div>
  <div class="swiper-pagination"></div>
</div>

<h1>Hello World</h1>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    pagination: {
      el: ".swiper-pagination",
    },
  });
</script>

在这里，我有一个<h1>保持静态的标签。但我希望它随着 Swiper Js 元素的每次滑动，内容也应该分别改变。例如，如果幻灯片当前在幻灯片 1 中，那么 h1 应该显示 Hello world 1，如果它在幻灯片 2 上，那么它应该显示 Hello world 2 ... 有人可以帮帮我吗？

标签： javascripthtml

解决方案

您可以根据需要使用swiper.activeIndex和更新h1标签 innerhtml / innertext。

如果你使用 react/angular/svelte 那么你需要将 state 变量设置为swiper.activeIndex.

推荐阅读