html中swiper组件的使用

最新推荐文章于 2025-02-28 23:17:56 发布

wqww_1

最新推荐文章于 2025-02-28 23:17:56 发布

阅读量3.6k

点赞数

分类专栏： vue 文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/wqww_1/article/details/123447199

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

静态的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.css" rel="stylesheet"> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.js"></script> -->

		<link href="../lib/swiper.css" rel="stylesheet" />
		<script src="../lib/swiper.js"></script>
		<script src="../lib/vue.js"></script>
		<style>
			.swiper-container {
				width: 600px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container kerwin">
			<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"></div>

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

			<!-- 如果需要滚动条-->
			<div class="swiper-scrollbar"></div>
		</div>

		<script>
			//初始化swiper
			new Swiper(".kerwin", {
				// direction: 'vertical', // 垂直切换选项
				loop: true, // 循环模式选项
				//自动切换
				autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				},

				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},

				// 如果需要滚动条
				scrollbar: {
					el: '.swiper-scrollbar',
				},
			})
		</script>
	</body>
</html>

动态swiper

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.css" rel="stylesheet"> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.js"></script> -->

		<link href="../lib/swiper.css" rel="stylesheet" />
		<script src="../lib/swiper.js"></script>
		<script src="../lib/vue.js"></script>
		<style>
			.swiper-container {
				width: 600px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container kerwin">
			<div class="swiper-wrapper">
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

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

			<!-- 如果需要滚动条-->
			<div class="swiper-scrollbar"></div>
		</div>

		<script>
			
			setTimeout(()=>{
				var list = ["qqq","vvvv","rrrr"]
				var newList = list.map(item=>`<div class="swiper-slide">${item}</div>`)
				console.log(newList)
				
				var owrapper = document.querySelector(".swiper-wrapper")
				owrapper.innerHTML = newList.join(' ')
			})
			
			//初始化swiper
			new Swiper(".kerwin", {
				// direction: 'vertical', // 垂直切换选项
				loop: true, // 循环模式选项
				//自动切换
				autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				},

				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},

				// 如果需要滚动条
				scrollbar: {
					el: '.swiper-scrollbar',
				},
			})
		</script>
	</body>
</html>

swiper整合vue使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.css" rel="stylesheet"> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.js"></script> -->

		<link href="../lib/swiper.css" rel="stylesheet" />
		<script src="../lib/swiper.js"></script>
		<script src="../lib/vue.js"></script>
		<style>
			.swiper-container {
				width: 600px;
				height: 300px;
			}

			.img-class {
				width: 600px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="swiper-container kerwin">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item in dataList" :key="item">
						<img :src="item" class="img-class" />
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
				<!-- 如果需要滚动条-->
				<div class="swiper-scrollbar"></div>
			</div>

		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					dataList: []
				},
				mounted() {
					//ajax
					setTimeout(() => {
						this.dataList = [
							"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F86d6277f9e2f070859318101e024b899a901f2ff.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=aec5cfa4ab00f14ebc352c6c0cf74968",
							"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F06%2F20200706150844_KcVlG.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=91b49462bd22370160fd89c05306e566",
							"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F7a899e510fb30f24029b4702c195d143ad4b03a9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=f03f024afb1ef595e5aa69217c4b5efc"
						]
					}, 2000)
				},
				updated() {
					console.log(document.querySelectorAll(".swiper-slide").length)
					//初始化swiper
					new Swiper(".kerwin", {
						// direction: 'vertical', // 垂直切换选项
						loop: true, // 循环模式选项
						//自动切换
						autoplay: {
							delay: 2500,
							disableOnInteraction: false,
						},

						// 如果需要分页器
						pagination: {
							el: '.swiper-pagination',
						},
						// 如果需要前进后退按钮
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
						// 如果需要滚动条
						scrollbar: {
							el: '.swiper-scrollbar',
						},
					})

				}
			})
		</script>
	</body>
</html>

swiper组件使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.css" rel="stylesheet"> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.js"></script> -->

		<link href="../lib/swiper.css" rel="stylesheet" />
		<script src="../lib/swiper.js"></script>
		<script src="../lib/vue.js"></script>
		<style>
			.swiper-container {
				width: 600px;
				height: 300px;
			}

			.img-class {
				width: 600px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--swiper封装组件要有key值-->
			<!-- <swiper v-if="dataList.length"></swiper> -->
			<swiper :key="dataList.length" :loop="false">
				<swiper-item v-for="data in dataList" :key="data">
					<img :src="data" class="img-class" />
				</swiper-item>
			</swiper>
		</div>
		<script>
			Vue.component("swiperItem",{
				template:`<div class="swiper-slide">\
							<slot></slot>
						  </div>`
			})
			
			Vue.component("swiper", {
				props:{
					loop:{
						type:Boolean,
						default:true
					}
				},
				template:`<div class="swiper-container kerwin">
							<div class="swiper-wrapper">
								<slot></slot>
							</div>
							<!-- 如果需要分页器 -->
							<div class="swiper-pagination"></div>
							<!-- 如果需要导航按钮 -->
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
							<!-- 如果需要滚动条-->
							<div class="swiper-scrollbar"></div>
						</div>`,
				mounted(){
					console.log(this.loop)
					//初始化swiper
					new Swiper(".kerwin", {
						// direction: 'vertical', // 垂直切换选项
						loop: this.loop, // 循环模式选项
						//自动切换
						autoplay: {
							delay: 2500,
							disableOnInteraction: false,
						},
					
						// 如果需要分页器
						pagination: {
							el: '.swiper-pagination',
						},
						// 如果需要前进后退按钮
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
						// 如果需要滚动条
						scrollbar: {
							el: '.swiper-scrollbar',
						},
					})
				}
			})
			
			new Vue({
				el: "#app",
				data: {
					dataList: []
				},
				mounted() {
					//ajax
					setTimeout(() => {
						this.dataList = [
							"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F86d6277f9e2f070859318101e024b899a901f2ff.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=aec5cfa4ab00f14ebc352c6c0cf74968",
							"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F06%2F20200706150844_KcVlG.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=91b49462bd22370160fd89c05306e566",
							"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F7a899e510fb30f24029b4702c195d143ad4b03a9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=f03f024afb1ef595e5aa69217c4b5efc"
						]
					}, 2000)
				},
				updated() {
					console.log(document.querySelectorAll(".swiper-slide").length)
				}
			})
		</script>
	</body>
</html>