vue2.0——使用swiper插件以及全局swiper实现轮播

最新推荐文章于 2023-06-26 11:11:42 发布

原创

最新推荐文章于 2023-06-26 11:11:42 发布 · 1.1k 阅读

收录于

本文介绍了如何在Vue2.0项目中使用Swiper轮播插件，包括局部引入和全局应用的方法。局部使用时，需要在组件内初始化Swiper，并在mounted生命周期钩子中执行。全局应用时，可在main.js中引入Swiper的CSS，避免在每个组件内重复导入。

**下载swiper：**

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!--<