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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页