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

 更新时间:2023年01月14日 10:55:17   作者:零Suger  
这篇文章主要介绍了vue使用swiper插件实现垂直轮播图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用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使用exif获取图片旋转,压缩的示例代码

    vue使用exif获取图片旋转,压缩的示例代码

    这篇文章主要介绍了vue使用exif获取图片旋转,压缩的示例代码,帮助大家更好的利用python处理图片,感兴趣的朋友可以了解下
    2020-12-12
  • vue调用本地摄像头实现拍照功能

    vue调用本地摄像头实现拍照功能

    这篇文章主要介绍了vue调用本地摄像头实现拍照功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • Vue如何更改表格中的某一行选项值

    Vue如何更改表格中的某一行选项值

    这篇文章主要介绍了Vue如何更改表格中的某一行选项值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue中的生命周期详细解读

    Vue中的生命周期详细解读

    这篇文章主要介绍了Vue中的生命周期详细解读,每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM,需要的朋友可以参考下
    2023-08-08
  • Element-UI+Vue模式使用总结

    Element-UI+Vue模式使用总结

    这篇文章主要介绍了Element-UI+Vue模式使用总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Vue Element UI 表单自定义校验规则及使用

    Vue Element UI 表单自定义校验规则及使用

    这篇文章主要介绍了Vue Element UI 表单自定义效验规则及使用,文中通过代码介绍了常见表单效验规则,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue2.0子同级组件之间数据交互方法

    Vue2.0子同级组件之间数据交互方法

    下面小编就为大家分享一篇Vue2.0子同级组件之间数据交互方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue组件如何设置Props实例详解

    Vue组件如何设置Props实例详解

    props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue修改页面标签的方法示例

    Vue修改页面标签的方法示例

    vue项目有时候需要根据页面需要动态的去修改页面标题名称,本文就来介绍一下,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 15 分钟掌握vue-next函数式api(小结)

    15 分钟掌握vue-next函数式api(小结)

    这篇文章主要介绍了15 分钟掌握vue-next函数式api(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论