1、需要引入Swiper插件

 <!-- swiper插件 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"> </script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

2、轮播图的html结构

 <div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperImgList">
<img :src="item" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
.swiper-pagination-bullet {  // 小圆点未激活的css
background: #fff !important;
opacity: 0.5 !important;
} .swiper-pagination-bullet-active { //小圆点激活的样式
background: #fff !important;
opacity: 1 !important;
}

3、js代码如下

initSwiper() {
var mySwiper = new Swiper('.swiper-container', {
speed: 1000,
autoplay: {
delay: 3000,
disableOnInteraction: false //手动滑动后,继续自动滑动
},
pagination: {
el: '.swiper-pagination',
},
loop: true
})
},

如上。

H5制作显示轮播图的方法Swiper的更多相关文章

  1. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  2. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  3. 移动端轮播图实现方法(dGun.js)

    本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...

  4. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  5. (数据科学学习手札90)Python+Kepler.gl轻松制作时间轮播图

    本文示例代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl作为一款强大的开源地理信 ...

  6. 如何使用微信小程序制作banner轮播图?

    在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...

  7. 使用JQuery制作幻灯片(轮播图)

    1.首先看一下目录结构 images文件夹放所需要播放的图片. js文件夹放jquery库和main.js 2.html代码: <!DOCTYPE html> <html lang= ...

  8. js实现轮播图动画

    在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...

  9. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

随机推荐

  1. Scala Class etc. 2

    Higher-Order Functions def 定义的是方法,而不是函数 函数可作为变量存在,可直接调用,也可作为值传递给其他函数 _ 后缀将普通方法变为函数: ceil _ 根据上下文编译器可 ...

  2. ZYNQ笔记(7):AXI从口自定义IP封装

    使用 AXI_Lite 从口实现寄存器列表的读写,并且自己封装为一个自定义 IP,以便以后使用.本次记录的是 M_AXI_GP0 接口,此接口是 ARM 作为主机,FPGA 作为从机,配置 FPGA ...

  3. react项目添加本地音频

    <audio src="./res/audio/alarm.mp3" autoplay="autoplay" loop="loop"  ...

  4. c# Windows服务管理

    .NET Framework中提供的类库可以很方便的实现对windows服务的安装.卸载.启动.停止.获取运行状态等功能.这些类都在System.ServiceProcess命名空间下. 所以,在开始 ...

  5. java中的进制与操作符

    直接常量 double: 111d,111D 二进制:前缀为0b 十六进制:前缀为0x或0X,后面最大9位. 八进制:前缀为0,后面最大7位. 按位操作符 与(&): 或(||): 异或(^) ...

  6. wangeditor视频

    wangeditor网址http://www.wangeditor.com/ 目前使用的是3.11版本 使用步骤 1.引用wangEditor.min.js 2.代码 2.1 取得函数var E = ...

  7. SpringBoot构建RESTful API

    1.RESTful介绍 RESTful是一种软件架构风格! RESTful架构风格规定,数据的元操作,即CRUD(create, read, update和delete,即数据的增删查改)操作,分别对 ...

  8. 基于OpenGL三维软件开发

    实验原理: OpenGL在MFC下编程原理---- Windows操作系统对OpenGL的支持 在Windows下用GDI作图必须通过设备上下文(DeviceContext简写DC)调用相应的函数:用 ...

  9. vue项目的一个package.json

    {   "name": "projectName",   "version": "1.0.1",   "des ...

  10. HTML5 表单新增内容

    一.H5 新增控件 1.datalist 元素 datalist 标签定义选项列表,请与 input 元素配合使用该元素.可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行 ...