vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue swiper插件垂直轮播图

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

作者：零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

总结

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

您可能感兴趣的文章:
阅读全文