<template>
  <view class="image-swiper">
    <swiper class="swiper-box" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in mainImages" :key="index">
        <image :src="item.url" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <view class="thumbnail-box">
      <view v-for="(thumb, index) in thumbnails" :key="index" class="thumbnail-item">
        <image :src="thumb.url" mode="aspectFill"></image>
        <text>{{ thumb.description }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const mainImages = ref([
  { url: 'https://example.com/main-image-1.jpg' },
]);

const thumbnails = ref([
  { url: 'https://example.com/thumbnail-1.jpg', description: '瑶山古寨' },
  { url: 'https://example.com/thumbnail-2.jpg', description: '民俗表演' },
  { url: 'https://example.com/thumbnail-3.jpg', description: '特色美食' },
  { url: 'https://example.com/thumbnail-4.jpg', description: '传统服饰' },
  { url: 'https://example.com/thumbnail-5.jpg', description: '其他' },
]);
</script>

<style scoped lang="scss">
@import './styles/index.scss';
</style>