vue自定义轮播图swiper

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

jia109014

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

阅读量528

点赞数 1

本文链接：https://blog.csdn.net/jia109014/article/details/105106368

版权

本文详细介绍了如何在Vue项目中使用Swiper组件创建自定义轮播图，包括HTML结构布局和JavaScript配置，帮助开发者实现功能丰富的滑动效果。

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

swiper组件：

html：

<template>

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide" v-for="item in swiper"><img :src="item.img" alt=""></div>

    </div>

    <div class="swiper-pagination swiper-pagination-bullets"></div>

  </div>

</template>

js：


<script>

  import Swiper from 'swiper';

  import 'swiper/dist/css/swiper.min.css';

 

  export default {

    name: 'swiper',

    data() {

      return {

        mySwiper: null

      }

    },

    props: ['swiper'], //swiper的就是test这个数据传递来的

    methods: {

      _initSwiper() {

        this.mySwiper = new Swiper('.swiper-container', {

          paginat