1. html页面如何使用swiper
对swiper不熟练的小伙伴们可能不知道怎么开始使用它,那么下面就让我来简单讲述一下关于swiper的使用流程,这些都是以前我自己在最开始使用的时候总结下来的,如果不知道的话可以作为一个参考。
1. 在官网下载swiper
swiper官方网址(下载链接)
2.在html页面中导入
<link rel="stylesheet" href="./Swiper-4.0.5/dist/css/swiper.min.css">
<script src="./Swiper-4.0.5/dist/js/swiper.min.js"></script>
3.基础代码
查看swiper文档API文档中的Swiper4 API文档
点击第一个 Swiper初始化,复制下面的代码
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项,自动滑动
})
</script>
4.按需增加代码
可以继续查看本页文档,或者跳转到中文教程-Swiper4.x使用方法,需要什么功能按说明添加
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
js里的内容
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
//解决自动播放停止的问题:
autoplay:{
disableOnInteraction: false,//false: 触碰后自动切换也不会停止
},
//修改swiper自己或子元素时,自动初始化swiper
observer: true,
//修改swiper的父元素时,自动初始化swiper
observeParents: true,
})
</script>
5.修改样式
如果需要改变分页器等样式或颜色,可以在Swiper插件的css样式中修改 ,找到你想要的样式进行修改
6.体验
代码中的图片路径需要换成你自己的图片哦
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<title></title>
<link rel="stylesheet" href="./Swiper-4.0.5/dist/css/swiper.css">
<style>
.swiper-container {
width: 300px;
margin: 0 auto;
}
.swiper-slide {
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide a">
<img src="./图片/1.jpg" alt="">
</div>
<div class="swiper-slide b">
<img src="./图片/2.jpg" alt="">
</div>
<div class="swiper-slide c">
<img src="./图片/3.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<script src="./Swiper-4.0.5/dist/js/swiper.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
disableOnInteraction: false,//false: 触碰后自动切换也不会停止
},
// 分页器(可点击)
pagination :{
el: '.swiper-pagination',
clickable :true,
},
})
</script>
</body>
</html>
2.vue项目中如何使用swiper
1.首先我们先创建好一个vue项目
2.下载swiper的依赖包
这里我用的是 “vue-awesome-swiper”,执行语句:
yarn add vue-awesome-swiper
//或者
npm install vue-awesome-swiper
3.引入
找到main.js文件,引入依赖项,对了,还要提前下载一个swiper.css,这是它自带的样式表,同样一起引入。样式表可以放在src目录下,当然你也可以放在其他目录下,只要引入的路径正确就可以啦。
//main.js
import '../src/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper);
4.当前页面使用
需要注意的是,在当前页面使用的时候需要先导入一下“vue-awesome-swiper”,然后在components里面写以下代码,
关于swiper的一些属性我是写在了data数据里面,也可以卸载mounted里面,因为当页面标签加载完毕后,swiper才会正常运行。注意绑定options属性,根据你自己的需求,可以查阅swiper的官方文档,去增加自己想要的属性和效果,现在一个简单的swiper就可以正式运行啦,关于swiper的一些具体内容和遇到的问题,我会在后面的文档里去总结和介绍,这篇文档只是提供给新手作为一个参考。
<!-- 组件的模板 -->
<template>
<div class="car">
<h1>{{title}}</h1>
<div class="swiper_content">
<swiper :options="swiperOption_1">
<swiper-slide>
<img src="http://img.hb.aicdn.com/7efada9b9cf4d97b8b588ade0879a2cfcea9f1d438aee-z7VruK_fw658" alt="">
</swiper-slide>
<swiper-slide data-swiper-autoplay="5000">
<img src="http://img.hb.aicdn.com/7efada9b9cf4d97b8b588ade0879a2cfcea9f1d438aee-z7VruK_fw658" alt="">
</swiper-slide>
<swiper-slide>
<img src="http://img.hb.aicdn.com/7efada9b9cf4d97b8b588ade0879a2cfcea9f1d438aee-z7VruK_fw658" alt="">
</swiper-slide>
<!-- 指示灯(分页器) -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>
<!-- 组件的模型 -->
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
// 组件的名称
name: "car",
data() {
return {
title: "购物车",
swiperOption_1: {
autoplay: {
delay: 1000,//自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
stopOnLastSlide: false,//当切换到最后一个slide时,是否停止自动切换。
disableOnInteraction: false,//用户操作swiper之后,是否禁止autoplay
},
loop:true,//轮播循环
//有时候会遇到swiper不能自己切换,可以试试这两句
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
//分页器
pagination: {
el: '.swiper-pagination',
clickable: true,//是否可点击
},
}
},
},
components: {
swiper,
swiperSlide,
},
}
</script>
<!-- 组件的样式 -->
<style scoped>
.swiper_content{
width: 500px;
height: 332px;
margin: 0 auto;
}
.swiper_content .swiper-slide img{
width: 100%;
}
</style>
//index.html
.swiper_content .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active{
background-color: #f33;
}
补充:
1.仔细观察上例第二个 swiper-slide,我在标签里面添加了一句代码 “data-swiper-autoplay=”5000””,也就是说,当切换到第二个的时候,切换的延迟时间会变成5s。
2.如果需要指示灯/分页器,可以参考上述代码,如果需要改变指示灯颜色或者样式,因为优先级的原因,找到类名,将样式写到index.html文件里可以生效,因为我自己写的时候发现写在当前页没有生效。