vue 使用 swiper 实现轮播的那些事

zz/2024/5/21 21:57:58

首先运行 npm下载

npm install swiper --save-dev

在需要用到的页面中

<template><div class="banner"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="lun.png" alt="" /></div><div class="swiper-slide"><img src="lun.png" alt="" /></div><div class="swiper-slide"><img src="lun.png" alt="" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 -->//自定义左右切换按钮“ swiper_btn ”<divclass="swiper-button-prev swiper_btn":style="{ backgroundImage: 'url(' + bg + ')' }"></div><divclass="swiper-button-next swiper_btn":style="{ backgroundImage: 'url(' + bg1 + ')' }"></div></div></div></template><script>
import Swiper from "swiper";
export default {data() {return {//自定义左右切换按钮bg: require("left.png"),bg1: require("right.png"),};},mounted() {var mySwiper = new Swiper(".swiper-container", {autoplay: 2000,loop: true,// 如果需要分页器pagination: ".swiper-pagination", //分页// 如果需要前进后退按钮prevButton: ".swiper-button-prev",nextButton: ".swiper-button-next",});},
};
</script><style scoped>
@import "swiper/dist/css/swiper.min.css";
.swiper-slide > img {width: 100%;
}
//自定义左右切换按钮
.swiper_btn {width: 92px;height: 92px;background-size: 100% 100%;
}
</style>

如果想要展示多张图片,在 munted 里面添加参数即可,代码如下:

mounted() {var mySwiper = new Swiper(".swiper-container", {autoplay: 2000,loop: true,//这里是显示3张,改变数字值,就可以改变显示的张数slidesPerView: 3,// 图片之间的距离spaceBetween: 30,// 如果需要分页器pagination: ".swiper-pagination", //分页// 如果需要前进后退按钮prevButton: ".swiper-button-prev",nextButton: ".swiper-button-next",});},

如果轮播不出来的话,可以安装下 npm install vue-awesome-swiper --save-dev 试一下


http://www.ngui.cc/zz/2700891.html

相关文章

scroll-behavior属性:滚动框指定滚动行为及锚点

1、scroll-behavior属性:auto(滚动条立即滚动) / smooth(窗口平稳滚动) / inherit / initial / unset 2、锚点 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>锚点平滑跳转</title>&l…

如何搭建vue3.0脚手架

一 创建vue3.0脚手架 1、如果已经安装过vue2.0,要先卸载vue2.0,没有安装过的话可以忽略这一步(也可以不卸载vue2.0,这样就可以创建不同版本的项目啦!) npm uninstall vue-cli -g2、安装vue3.0,注意:Node 版本升级至 8.9 及以上 npm install -g @vue/cli3、vue3.0创建…

ThinkPHP下搭建后台(H-ui.admin)

一、下载 下载这里就不多说了&#xff0c;自行去官网下载即可 二、安装 ThinkPHP直接解压到&#xff0c;网页根目录&#xff08;我的是www目录下&#xff09; H-ui.admin先解压在一个文件夹中&#xff0c;稍后慢慢接入 三、搭建 首先要保证ThinkPHP搭建成功&#xff0c;如果是在…

MapReduce中词频统计简单实现

输入数据 test1 test2 test2 test3 test3 test3 test5 test5 test4 test5 test5 test4 test5 test4 test4 Maven必须配置 注意:Windos本地运行需要确定本地有Hadoop依赖并确保和Pom配置文件中版本一致,WordCountDriver中第6点输入输出需要自行修改 <?xml version=&qu…

MapReduce 订单和商品pid替换(Map Join)基本实现

思路简介 首先在Map阶段初始化时读取替换表的内容存入内存中,然后在Map阶段map方法时将其进行替换。所以只需要Map阶段即可,不需要Reduce阶段。 输入数据 order.txt 订单表数据(间隔:\t) 订单id 商品id 数量 1001 01 1 1002 02 2 1003 03 3 1004 01 4 1005 02 5 1006 0…

c++移动语义、万能引用、引用折叠、完美转发

想了解标题的内容&#xff0c;我们可以先简单了解下c中的左值和右值。 左值和右值 左值&#xff1a;能对表达式取地址&#xff0c;就是左值右值&#xff1a;不能对表达式取地址&#xff0c;就是右值将亡值&#xff1a;和右值引用相关的表达式&#xff0c;这样的表达式通常是将…

Ubuntu14.04安装CMake3.5.1

1、下载cmake-3.5.1.tar.gz&#xff1a;https://cmake.org/download/ 2、把 cmake-3.5.1.tar.gz放到任意临时目录(因为Cmake的安装路径默认在&#xff1a;/usr/local/中)&#xff0c;接着查看 cmake-3.5.1.tar.gz的权限&#xff08;如果权限不足&#xff0c;就不能顺利操作&…

ASP.NET 实现邮箱发送随机验证码功能(详解)

一&#xff1a;前端页面添加一个邮件发送按钮&#xff08;button控件&#xff09; <div> <asp:Button ID"Button1" runat"server" Text"发送验证码" OnClick"Button1_Click" /> </div> 二&#xff1a;后台对butt…

LoadRunner脚本中添加关联函数,提示Connot start replay due to compilation errors

LoadRunner脚本中添加关联函数&#xff0c;提示Connot start replay due to compilation errors 今天在编辑脚本时&#xff0c;用fiddler抓到一个包里的数据&#xff0c;对包里的username进行关联函数 从上面可以看出&#xff0c;我要关联的是username&#xff0c;查看它的左…

接口测试的基础知识

接口测试的基础知识 1.接口分类: 软件接口:接口是双方(可能是系统、模块、服务等)之间数据交互的一个标准,定制接口方要想让对方没有疑问。 硬件接口:网卡、USB等 2.接口测试的定义: 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以…