vue使用swiper插件实现垂直轮播图

2026-03-30 02:50:52

使用swiper插件做垂直轮播图

1.下载安装

cnpm install swiper vue-awesome-swiper --save

2.main.js：

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/swiper-bundle.min.css";
Vue.use(VueAwesomeSwiper)
//配置分页器
import {Swiper as SwiperClass,Pagination} from 'swiper';
SwiperClass.use([Pagination]);

3.vue页面：

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide">slide 1</div>
      <div class="swiper-slide">slide 2</div>
      <div class="swiper-slide">slide 3</div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        direction: "vertical", //设置竖向轮播
        pagination: {
          el: ".swiper-pagination",
          clickable:true,
        },
        on: {
          slideChangeTransitionEnd: function () {
            // this.activeIndex 是索引index，这个用this才可以获取到
            console.log(this.activeIndex);
          },
        },
      },
    };
  },
  mounted() {
    this.mySwiper.slideTo(0, 1000, false);
  },
};
</script>
<style scoped>
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.swiper-slide {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
</style>

效果图：

注：我安装的当前版本是"swiper": “^7.3.3”,“vue-awesome-swiper”: “^4.1.1”,

swiper轮播插件使用一次显示多个slides

**项目中需要实现下图效果 **

demo 代码拿来即用,引用的地址是 CDN 资源

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<!-- <link rel="stylesheet" href="../package/swiper-bundle.min.css"> -->
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				height: 210px;
				position: absolute;
				left: 0;
				bottom: 11px;
			}

			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;

				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}

			.swiper-button-prev,
			.swiper-button-next {
				width: 56px;
				height: 56px;
				background: #9999;
				border-radius: 50%;
				font-size: 16px;
				color: #ffff;
			}

			.swiper-button-prev:after,
			.swiper-button-next:after {
				font-size: 28px;
			}

			.swiper_item {
				font-size: 14px;
				/* opacity: 0.3; */
				background: transparent;
			}

			.track_box {
				height: 100%;
				margin-right: 10px;
				background: #fff;
				border-radius: 5px;
				box-sizing: border-box;
				overflow: hidden;
			}

			.track_time {
				width: 50px;
				height: 100%;
				-webkit-writing-mode: vertical-rl;
				writing-mode: vertical-rl;
				line-height: 32px;
				font-size: 12px;
				background: #6e6e6e;
				color: #FFFFFF;
				border-radius: 5px;
				letter-spacing: 0.2em;
			}

			.track_interval {
				background: #3385ff;
				color: #fff;
				height: 30px;
				line-height: 30px;
				text-align: left;
				padding: 0 0 0 10px;
			}

			.track_box .text {
				height: calc(100% - 36px);
				overflow: hidden;
				padding: 0 10px;
			}

			.text p {
				line-height: 1.8em;
			}

			.text div {
				text-align: left;
				color: #3385ff;
			}
		</style>
	</head>

	<body>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">

			</div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>

		<!-- Swiper JS -->
		<!--  <script src="../package/swiper-bundle.min.js"></script> -->
		<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
		<!-- Initialize Swiper -->
		<script>
			var strText = `
					<div class="swiper-slide swiper_item" >
						<div class="track_box">
							<div class="track_interval">时间: 10/22 10:25-12:48</div>
							<div class="text">
								<p>从:河南省郑州市中原区山寨街道嵩山南路,河南工业大学(嵩山路校区)</p>
								<p>到: 从:河南省郑州市中原区山寨街道嵩山南路,河南工业大学(嵩山路校区)</p>
								<div>形势时间: 2小时23分钟</div>
							</div>
						</div>
						<div class="track_time">
							停留时间常3个小时12分钟
						</div>
					</div>
			`;
			for(var i = 0 ; i < 3 ; i++){
				$('.swiper-wrapper').append(strText);
			}

			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量(carousel模式)。
				autoplay: false, //设置为true启动自动切换，并使用默认的切换设置。
				direction: 'vertical', //设置滑动方向
				centeredSlides: false,  //设定为true时，active slide会居中，而不是默认状态下的居左。
				observeParents: true, //这个是启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
				grabCursor: true,  //置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
				autoplayDisableOnInteraction: false,  //是否禁止autoplay。默认为true：停止。
				mousewheel: {	//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。 默认1
					sensitivity : 2,
				  },
				autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				preventClicks : false, //默认true
				preventClicksPropagation : true,  //阻止click冒泡。拖动Swiper时阻止click事件
				slideToClickedSlide:true,  //设置为true则点击slide会过渡到这个slide。
				scrollbar: {           //为Swiper增加滚动条。
				    el: '.swiper-container',
				  },
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});

		</script>
	</body>

</html>

居于右侧贴边显示 ,以鼠标滚动滑动列表(调整了css.和 swiper 配置属性)

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<!-- <link rel="stylesheet" href="../package/swiper-bundle.min.css"> -->
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 300px;
				height: 100%;
				position: absolute;
				bottom: 0;
				right: 5px;
			}

			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;

				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}

			.swiper-button-prev,
			.swiper-button-next {
				width: 56px;
				height: 56px;
				background: #9999;
				border-radius: 50%;
				font-size: 16px;
				color: #ffff;
			}

			.swiper-button-prev:after,
			.swiper-button-next:after {
				font-size: 28px;
			}

			.swiper_item {
				font-size: 14px;
				flex-direction: column;
				background: transparent;
			}

			.track_box {
				height: 100%;
				background: #fff;
				border-radius: 5px;
				box-sizing: border-box;
				overflow: hidden;
				margin: 5px 0;
			}

			.track_time {
				width: 100%;
				height: auto;
				line-height: 32px;
				font-size: 12px;
				background: #e5e5e5;
				color: #333;
				border-radius: 5px;
				letter-spacing: 0.2em;
				font-weight: 600;
			}

			.track_interval {
				height: 30px;
				line-height: 30px;
				text-align: left;
				padding: 0 0 0 10px;
			}

			.track_box .text {
				padding: 0 10px;
			}

			.text p {
				line-height: 1em;
			}

			.text div {
				text-align: left;
				color: #3385ff;
			}

			.track_time,
			.track_box {
				border: 1px solid #d8d8d7;
			}
		</style>
	</head>

	<body>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper" id="xc">

			</div>
		</div>

		<!-- Swiper JS -->
		<!--  <script src="../package/swiper-bundle.min.js"></script> -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
		<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
		<!-- Initialize Swiper -->
		<script>
			var strText = `
					<div class="swiper-slide swiper_item" >
						<div class="track_box">
							<div class="track_interval">时间: 10/22 10:25-12:48</div>
							<div class="text">
								<p>从:河南省郑州市中原区山寨街道嵩山南路,河南工业大学(嵩山路校区)</p>
								<p>到: 从:河南省郑州市中原区山寨街道嵩山南路,河南工业大学(嵩山路校区)</p>
								<div>形势时间: 2小时23分钟</div>
							</div>
						</div>
						<div class="track_time">
							停留时间常3个小时12分钟
						</div>
					</div>
			`;
			for(var i = 0 ; i < 3 ; i++){
				$('.swiper-wrapper').append(strText);
			}
			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量(carousel模式)。
				autoplay: false, //设置为true启动自动切换，并使用默认的切换设置。
				direction: 'vertical', //设置滑动方向
				centeredSlides: false,
				grabCursor: true, //置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
				autoplayDisableOnInteraction: false, //是否禁止autoplay。默认为true：停止。
				mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
				autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
			});

		</script>
	</body>

</html>

Swiper 动态加载数据遇到的坑

我们在写项目的时候，很多swiper的数据都是动态获取到的，我们在刚进入页面的时候，初始化了swiper，但是当我们加载成功数据后（比如ajax获取数据），swiper的子元素被改变了，于是swiper就不能正常执行了

主要代码，就是下面的属性

observer: true, //修改swiper自己或子元素时，自动初始化swiper

observeParents: true, //修改swiper的父元素时，自动初始化swiper

如果上面的方法还不行:

其实还有另一种方法，就是在加载数据成功之后，再次初始化swiper

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

Vue使用Swiper封装轮播图组件的方法详解

目录 Swiper 为什么要封装组件开始封装 1.下载安装Swiper 2.引入css样式文件 3.引入js文件 4.把官网使用方法中的HTML结构复制粘贴过来 5.初始化Swiper 自定义效果完整代码效果展示 Swiper Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配. 官网地址:www.swiper.com.cn/ 目前最新版本是Swiper7,但众所周知最新版本通常不稳定,所以这里使用Swiper6来封装. Swiper各版本区别: 为什么要封
vue中使用swiper轮播图的正确姿势(亲测有效)

目录前言 1.新建vue项目 2.装swiper的包 3.使用swiper 总结前言网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的,吐槽完毕.假设你是个新手,我从新建项目开始跟你讲,以下是步骤. 1.新建vue项目 vue create 项目名然后选最下面那一个(键盘上下键操作)然后回车选择Bable,Router,Vuex,Css-Processords四个,其他的不要选中(空格键是选中和取消选中) 剩下的步骤按这张图来进行选择,然后项目就创建
vue如何解决轮播图(Swiper)第一张图片一闪而过问题

目录 vue轮播图(Swiper)第一张图片一闪而过解决方式 vue图片轮播实现过程实现思路总结 vue轮播图(Swiper)第一张图片一闪而过解决方式初始化(Swiper)时,外层添加一个定时器代码: setTimeout(function() { var mySwiper = new Swiper($(el), { autoplay: true,//可选选项,自动滑动 speed:500,//切换时间 loop : true, pagination : pagination, p
vue修改swiper框架轮播图小圆点的样式不起作用的解决

目录 swiper框架轮播图小圆点样式不起作用不要加 scoped swiper小圆点默认样式改变 swiper框架轮播图小圆点样式不起作用不要加 scoped 下面是错误写法 <style scoped> .swiper-pagination-bullet-active { background: white; } </style> 正确写法 <style > .swiper-pagination-bullet-active { back
vue使用swiper插件实现轮播图的示例

hello大家好,最近我在做一个仿饿了么的项目,我会将我的项目经验同步到这里,与大家分享! vue - 使用swiper插件实现轮播图下载安装: npm install swiper --save Msite.vue的HTML部分:  <div class="swiper-container"> <div class="swiper-wrapper"> <div
JS中Swiper的使用和轮播图效果

Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs
vue.js整合mint-ui里的轮播图实例代码

初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"
微信小程序使用swiper组件实现层叠轮播图

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下 wxml: <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" i
微信小程序视图容器（swiper）组件创建轮播图

本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l
用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $
videojs+swiper实现淘宝商品详情轮播图

本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码,供大家参考,具体内容如下这个引用了videojs和swiper.实现效果类似淘宝商品详情中的轮播图,首张轮播为视频: 当视频开始播放时,轮播停止.视频暂停时,轮播继续. 当视频播放中,滑动到下个slide时,视频暂停播放. swiper手册 HTML部分:  <div class="swiper-container"> <div class
Swiper如何实现两行四列轮播图效果实例

目录案例效果基本样式所需文件循环遍历总结案例效果基本样式 .icons{ width:100%; overflow: hidden; } .icons-item{ width: 25%; height: 0; padding-bottom: 25%; float: left; } .icons-item img{ width: 1.1rem; height: 1.1rem; display: block; margin: 0 auto; padding-top: .2rem; }
原生js实现移动开发轮播图、相册滑动特效

使用方法: 分别引用css文件和js文件如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

vue使用swiper插件实现垂直轮播图

目录

使用swiper插件做垂直轮播图

swiper轮播插件使用 一次显示多个slides

Swiper 动态加载数据遇到的坑

总结

相关推荐

随机推荐

swiper轮播插件使用一次显示多个slides