Carousel 组件：swiper实现轮播图组件

yuroll

已于 2023-04-27 17:38:51 修改

阅读量449

点赞数

文章标签： html javascript 前端

于 2023-04-27 17:34:55 首次发布

本文链接：https://blog.csdn.net/yuroll/article/details/130411577

版权

本文详细介绍了如何利用Swiper插件在前端开发中创建Carousel组件。首先，通过安装swiper开始；接着，创建名为Carousel.vue的组件；最后，在main.js文件中引入并注册组件，以便全局使用。

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

查看官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

步骤一：安装swiper

 cnpm install swiper@5 -S

步骤二：创建Carousel.vue组件

  <!-- 公用组件，在component中创建-->
<template>
  <!--banner轮播-->
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(carousel, index) in list"
        :key="carousel.id"
      >
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="sw