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