swiper

最新推荐文章于 2023-12-05 19:03:35 发布

RxnNing

最新推荐文章于 2023-12-05 19:03:35 发布

阅读量105

点赞数

分类专栏：样式 npm vue 文章标签： vue swiper swiper3

本文链接：https://blog.csdn.net/weixin_46211267/article/details/113866189

版权

vue 同时被 3 个专栏收录

50 篇文章

订阅专栏

样式

12 篇文章

订阅专栏

npm

11 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用Swiper库创建轮播图，包括安装步骤、全局引入、模板代码、JS初始化配置以及样式的设置。示例代码展示了如何设置循环播放、自动切换、分页器、导航按钮和滚动条等功能。同时提供了参考资料链接，帮助开发者更好地理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue zhong 使用 swiper
安装（注意版本）

npm install swiper@3 --save-dev

全局引入

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

使用

<template>
  <div class="swiper1">
    <el-row>
      <el-col :span="14">
        <div class="swiper-container">
          <div style="background-image:url('https://profile.csdnimg.cn/C/8/F/2_weixin_46211267');height: 100%" data-swiper-parallax="-3%" data-swiper-parallax-duration="3000"></div>
          <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>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  mounted() {
    var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay:2000,
    pagination: '.swiper-pagination', // 如果需要分页器
    autoplayDisableOnInteraction: false,
    nextButton: '.swiper-button-next',// 如果需要前进后退按钮
    prevButton: '.swiper-button-prev',
    parallax : true,
    scrollbar: '.swiper-scrollbar',// 如果需要滚动条
  })        
  }
};
</script>

<style scoped>
.swiper-container {
  position: relative;
  width: 100%;
  height: 200px;
} 
.swiper-container .swiper-slide {
  width: 100%;
  line-height: 200px;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>

对应的swiper 文档

http://caibaojian.com/swiper-api/start/new.html

参考文章：https://www.cnblogs.com/lp1996/p/13560494.html