swiper 轮播列表轮播

最新推荐文章于 2024-07-12 21:11:29 发布

星空小梦

最新推荐文章于 2024-07-12 21:11:29 发布

阅读量266

点赞数

分类专栏： swiper 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_50885665/article/details/128704422

版权

本文介绍了如何利用JavaScript库Swiper创建前端轮播效果，涵盖了设置基本配置、添加列表项滑动、自定义样式等方面，适用于展示图片或列表内容的无缝切换。

摘要由CSDN通过智能技术生成

<template>
  <div style="height: calc(100vh - 111px - 62vh - 5vh);">
    <div class="title">{
  { title }}</div>
    <swiper
      class="swiper"
      :options="swiperOption"
      style="height: calc(100% - 4vh);"
    
    >
      <swiper-slide v-for="(item, index) of 10" :key="index" >
        <div class="xx">
          <div >Slide 1</div>
        </div>
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/s