关于swiper那些事儿（一）

最新推荐文章于 2024-07-12 23:16:20 发布

苏七的猫

最新推荐文章于 2024-07-12 23:16:20 发布

阅读量1.6k

点赞数 2

分类专栏： swiper的使用方法文章标签： swiper

本文链接：https://blog.csdn.net/pacholy/article/details/82381199

版权

swiper的使用方法专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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文件里可以生效，因为我自己写的时候发现写在当前页没有生效。