Vue2 swiper基础实现轮播图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

swiper的基础使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、swiper官网

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

二、基础使用

1.创建Vue项目

vue create demo_vue复制

2.安装swiper插件

        注意:我们用的是vue2所以推荐大家下载swiper5版本

npm install swiper@5复制

示例:

查看安装是否完成:

3.组件内引入css以及js

// 引入js
import Swiper from "swiper";
// 引入css
import "swiper/css/swiper.min.css";复制

4.打开官网

        官网上方导航栏的中文教程里面的Swiper使用方法

复制其html代码粘贴至组件:

<template>
  <div>
    <div class="swiper">
      <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>
  </div>
</template>复制

复制其js代码粘贴至组件:

export default {
  name: "",
  mounted() {
    var mySwiper = new Swiper(".swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
 
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
 
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
 
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
};复制

写一些简单的样式:

<style scoped>
.swiper{
  overflow: hidden;
}
.swiper-slide {
  text-align: center;
  background-color: aqua;
}
</style>复制

结果:

<template>
  <div>
    <div class="swiper">
      <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>
  </div>
</template>
 
<script>
// 引入js
import Swiper from "swiper";
// 引入css
import "swiper/css/swiper.min.css";
export default {
  name: "HelloWorld",
  mounted() {
    var mySwiper = new Swiper(".swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
 
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
 
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
 
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
};
</script>
 
<style scoped>
.swiper{
  overflow: hidden;
}
.swiper-slide {
  text-align: center;
  background-color: aqua;
}
</style>复制

更改配置项:

查阅api文档里面的配置项

示例:autoplay:true 设置是否自动轮播

var mySwiper = new Swiper(".swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
      
      autoplay:true, //自动轮播
 
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
 
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
 
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });复制

设置自动轮播的时间间隔: autoplay: { delay: 1000,//1秒切换一次 }

var mySwiper = new Swiper(".swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
 
      autoplay: {
        delay: 1000, //1秒切换一次
      },
 
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
 
        clickable: true, //设置小球是否能点
      },
 
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
 
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });复制

设置分页器(轮播图下面的小圆点是否能点击切换):clickable: true

var mySwiper = new Swiper(".swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
 
      autoplay:true, //自动轮播
 
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        
        clickable: true, //设置小球是否能点
      },
 
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
 
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });复制

更多请翻阅api文档