<template>
<div class="home">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"
v-for="(item, index) in banners"
:key="index">
<img :src="item.img"
alt=""
title="" />
</div>
</div>
<div class="swiper-pagination"
slot="pagination"></div>
</div>
</div>
</template> <script>
import Swiper from "swiper";
export default {
name: "home",
data () {
return {
checked: true,
banners: [
{ img: require("../assets/img/banners.png") },
{ img: require("../assets/img/logo.png") },
{ img: require("../assets/img/banners.png") },
{ img: require("../assets/img/logo.png") }
], };
},
mounted () {
// 轮播图
new Swiper(".swiper-container", {
// 如果需要分页器 这样写小圆点就有了
pagination: {
el: ".swiper-pagination",
clickable: true
},
loop: true, // 循环模式选项
autoplay: {
delay: ,
disableOnInteraction: false
}
}); }, };
</script>
<style scoped lang="scss">
.swiper-container {
width: %;
height: 4rem;
img {
width: %;
height: %;
}
}
</style>

在main.js中引入(需将文件放在该路径下)

import "./assets/css/swiper.min.css";

VUE swiper.js引用使用轮播图的更多相关文章

  1. vue swiper异步加载轮播图,并且懒加载

    参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  6. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  7. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  8. swiper结合ajax的轮播图

    Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...

  9. 微信小程序之视图容器(swiper)组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

随机推荐

  1. day10-Python运维开发基础(函数嵌套、nonlocal声明局部变量、闭包、locals/globals、lambda表达式)

    1. 函数的嵌套与nonlocal 声明局部变量 # ### 函数的嵌套 """ 函数和函数之间可以互相嵌套: 嵌套在内层的叫做内函数 乔涛在外层的叫做外函数 " ...

  2. java中,小数为0,保留整数,不为0,保留小数

  3. 「SCOI2005」栅栏

    传送门 Luogu 解题思路 我们有很显然的这样一条贪心思路: 首先满足长度短的木板,因为如果可以满足长的也肯定可以满足短的,而且可能满足更多. 那么我们就会有这样的思路:枚举一条木板由哪条木板切割而 ...

  4. java中栈内存与堆内存(JVM内存模型)

    java中栈内存与堆内存(JVM内存模型) Java中堆内存和栈内存详解1 和 Java中堆内存和栈内存详解2 都粗略讲解了栈内存和堆内存的区别,以及代码中哪些变量存储在堆中.哪些存储在栈中.内存中的 ...

  5. sqlite帮助类

    帮助类 using System; using System.Collections.Generic; using System.Data; using System.Data.SQLite; usi ...

  6. 干货 | RDS For SQL Server单库上云

    数据库作为核心数据的重要存储,很多时候都会面临数据迁移的需求,例如:业务从本地迁移上云.数据中心故障需要切换至灾备中心.混合云或多云部署下的数据同步.流量突增导致数据库性能瓶颈需要拆分-- 本文将会一 ...

  7. Adapter之spinner

    前言: 在写代码当中有时候会用到下拉列表,下面我们讲一下spinner 正文: 因为比较简单,和之前的listView很像,所以直接上代码 <Spinner android:layout_wid ...

  8. PAN3501与AS3933完美兼容替代

    现在不少校园门禁卡都是采用奥地利的AS3933,市场需求是供不应求,当然价格上还是不断上升趋势.成本上压力也是越来越大,不少厂家在寻找能替代软硬件兼容AS3933的芯片方案.今天我就为大家介绍一款能否 ...

  9. Hexo搭建个人博客及next主题基本配置

    前言 国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...

  10. loadBeanDefinitions方法源码跟踪(二)

    因为字数超过了限制,所以分成了三篇,承接上篇: https://www.jianshu.com/p/a0cfaedf3fc5 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 3.parseDef ...