使用swiper实现上面图片转换，下面信息联动

Swiper是一个流行的JavaScript库，用于创建响应式的触屏滑动切换效果，适用于创建轮播图、幻灯片、滚动列表等动态内容展示。如果你想在网页上实现图片轮播，并且随着图片的切换，下方的信息也随之更新，可以按照以下步骤操作：

1. 首先，在HTML中设置基本结构，包括swiper容器、轮播项（图片）和信息块：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
    <!-- 添加更多图片 -->
  </div>
  <div class="swiper-pagination"></div> <!-- 如果需要显示页码 -->
</div>
<div class="info-container">
  <!-- 下面的信息将会根据当前图片的内容更新 -->
  <p class="current-info">对应信息1</p>
</div>

2. 引入Swiper CSS和JS文件到你的项目中。

3. 使用JavaScript初始化Swiper，并监听滑动事件，获取当前显示的图片索引，然后更新对应的`current-info`元素：

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  // 初始化配置选项...
});

swiper.on('slideChangeTransitionEnd', function () {
  const currentIndex = swiper.clickedIndex;
  const currentInfoElement = document.querySelector('.current-info');
  currentInfoElement.textContent = '对应信息' + (currentIndex + 1);
});

4. 如果有多个信息块，可以根据需求调整`current-info`的选择器，使其关联相应的图片信息。