vue3并排图片展示

### 实现多张图片并排展示

为了实现在 Vue3 项目中多张图片并排展示的效果，可以采用多种方法。一种常见的方式是利用 CSS Flexbox 或 Grid 布局来控制容器内的子元素（即图片），使其水平排列。

#### 使用 CSS Flexbox 进行布局

定义一个父级 div 容器用于容纳所有的 img 子项，并设置其 display 属性为 flex：

<div class="image-container">
    <img src="./path/to/image1.jpg" alt="Image 1"/>
    <img src="./path/to/image2.jpg" alt="Image 2"/>
    <!-- 更多图像 -->
</div>

对于上述 HTML 结构，在对应的 `<style>` 标签内添加如下样式规则以确保所有子图像是横向分布的[^1]：

.image-container {
    display: flex;
    overflow-x: auto; /* 当内容超出容器宽度时允许滚动 */
}

.image-container img {
    min-width: 200px; /* 设置每张图片最小宽度 */
    height: auto;     /* 自动调整高度保持比例 */
}

此配置使得 `.image-container` 下的所有 `img` 元素会按照顺序依次平铺开来；当它们总宽超过外层盒子尺寸，则可以通过滑动手势查看剩余部分。

另外，考虑到移动端用户体验优化，还可以引入触摸事件监听机制以便于用户能够更加方便地浏览整个画廊[^3]。

#### 添加交互功能

为了让页面上的轮播效果具备更好的互动性，可以在组件内部加入左右方向键按钮供访客手动触发切换操作。这里给出一段简化后的模板代码片段作为参考：

<template>
  <section>
      <button @click="prevSlide">❮ Prev</button>

      <ul class="list" v-if="images.length" :style="{ transform: `translateX(${currentIndex * -slideWidth}px)` }">
          <li v-for="(item, idx) in images" :key="idx">
              <img :src="item.src" />
          </li>
      </ul>

      <button @click="nextSlide">Next ❯</button>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const slideWidth = 300; // 单个幻灯片宽度(px)
let currentIndex = ref(0);
const images = [
    { src: './path/to/image1.jpg' },
    { src: './path/to/image2.jpg' }
];

function prevSlide() {
    currentIndex.value--;
    if (currentIndex.value < 0) currentIndex.value += images.length;
}

function nextSlide() {
    currentIndex.value++;
    if (currentIndex.value >= images.length) currentIndex.value -= images.length;
}
</script>

<style scoped>
.list li {
    list-style-type: none;
    float: left;
}

.list img {
    width: ${slideWidth}px;
    height: auto;
}
</style>

这段脚本实现了基本的前后翻页逻辑以及相应的过渡动画处理。