我对 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 ...
有人可以帮我吗。