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

vue使用swiper插件 vue垂直轮播图 vue swiper插件 2023-01-14 12:01:17 966人浏览安东尼

摘要

目录使用swiper插件做垂直轮播图swiper轮播插件使用一次显示多个slidesSwiper 动态加载数据遇到的坑总结使用swiper插件做垂直轮播图 1.下载安装 cnpm

使用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;

				
				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;
				
				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;

				
				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

总结

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue使用swiper插件实现垂直轮播图

本文链接: https://www.lsjlt.com/news/177734.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录使用swiper插件做垂直轮播图swiper轮播插件使用一次显示多个slidesSwiper 动态加载数据遇到的坑总结使用swiper插件做垂直轮播图 1.下载安装 cnpm ...

99+

2023-01-14

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

目录vue - 使用swiper插件实现轮播图使用watch与$nextTick解决轮播的Bug hello大家好，最近我在做一个仿饿了么的项目，我会将我的项目经验同步到这里，与大...

99+

2022-11-12
怎么使用vue轮播组件vue-awesome-swiper实现轮播图

这篇文章主要讲解了“怎么使用vue轮播组件vue-awesome-swiper实现轮播图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用vue轮播组件vue-awesome-swipe...

99+

2023-07-04
vue中如何使用轮播图插件vue-awesome-swiper

这篇文章主要介绍了vue中如何使用轮播图插件vue-awesome-swiper，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。Vue-Awe...

99+

2022-10-19
vue中怎么使用vue-awesome-swiper轮播图插件

vue中怎么使用vue-awesome-swiper轮播图插件，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。第一步安装npm ins...

99+

2022-10-19
vue的vue-awesome-swiper轮播图插件怎么使用

这篇文章主要讲解了“vue的vue-awesome-swiper轮播图插件怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue的vue-awesome-swiper轮播图插件怎么使用...

99+

2023-07-04
基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析

这篇文章主要为大家展示了“基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于vu...

99+

2022-10-19
Vue3使用Swiper实现轮播图示例详解

目录正文Swiper 的参数代码实现Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决其它方式正文...

99+

2023-02-12

Vue3 Swiper轮播图 Vue3 Swiper
Vue封装Swiper如何实现图片轮播效果

小编给大家分享一下Vue封装Swiper如何实现图片轮播效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！图片轮播是前端中经常需...

99+

2022-10-19
Vue怎么封装Swiper实现图片轮播效果

这篇“Vue怎么封装Swiper实现图片轮播效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue怎么封装Swiper实现...

99+

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

目录Swiper为什么要封装组件开始封装1.下载安装Swiper2.引入css样式文件3.引入js文件4.把官网使用方法中的HTML结构复制粘贴过来5.初始化Swiper自定义效果完...

99+

2022-11-13
jquery插件实现轮播图效果

每天一个jquery插件-jquery插件实现轮播图，供大家参考，具体内容如下效果如下代码部分 .rel{ white-space:nowrap; overflow-y...

99+

2022-11-12
vue3.x使用swiper实现卡片轮播

本文实例为大家分享了vue3.x使用swiper实现卡片轮播的具体代码，供大家参考，具体内容如下版本号： vue/cli：4.5.12swiper：^6.8.4 安装 npm in...

99+

2022-09-27
Swiper.js插件超简单实现轮播图

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说，直接上教程 1、首...

99+

2022-11-11
Swiper.js插件实现轮播图的案例

小编给大家分享一下Swiper.js插件实现轮播图的案例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Swiper是纯javascript打造的滑动特效插件，面向...

99+

2023-06-14
微信小程序swiper轮播图组件如何使用

本篇内容介绍了“微信小程序swiper轮播图组件如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在components中新建文件夹sw...

99+

2023-07-02
vue中使用swiper轮播图的正确姿势(亲测有效)

目录前言1.新建vue项目2.装swiper的包3.使用swiper总结前言网上搜了一大堆在vue中如何使用swiper，结果搜出来一堆垃圾，也不知道从哪里复制的，吐槽完毕。假设你...

99+

2022-11-13
如何使用vue实现轮播图片

这篇“如何使用vue实现轮播图片”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用vue实现轮播图片”文章吧。效果图案例...

99+

2023-07-02
Vue实现轮播图组件的封装

目录轮播图功能-获取数据轮播图-通用轮播图组件轮播图-数据渲染轮播图-逻辑封装轮播图功能-获取数据目标: 基于pinia获取轮播图数据核心代码：（1）在types/data.d...

99+

2023-05-16

Vue轮播图组件封装 Vue组件封装
微信小程序中如何实现swiper组件构建轮播图

小编给大家分享一下微信小程序中如何实现swiper组件构建轮播图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！实现效果图：wxm...

99+

2022-10-19