移动端滚动一屏swiper的使用

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 3.1k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在移动端实现Swiper滑动一屏效果。首先从swiper官网下载所需的js和css文件，然后在新建的HTML文件中引入这些资源。接着在HTML结构中配置Swiper元素，最后通过JS初始化并设置Swiper，从而达到滑动一屏的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先在swiper官网下载需要的js和css文件：https://3.swiper.com.cn/download/index.html

1.首先新建一个文件夹，文件夹中创建html文件，一个css文件夹，js文件夹，images文件夹。

2.在html文件引入css和js

第一步 <link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />

第二步 <script src="../js/swiper-3.4.2.min.js"></script>

第三步写html部分

<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide slide1">Slide1</div>
				<div class="swiper-slide slide2">Slide2</div>
				<div class="swiper-slide slide3">Slide3</div>
			</div>
		</div>
		<script src="../js/swiper-3.4.2.min.js"></script>

</body>

第四步写js部分

<script>  
	//实例化swiper
	var swiper = new Swiper(".swiper-container", {  
		direction: "vertical",  
	});  
</script>

完整代码如下

<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <link rel="stylesheet" href="css/swiper-3.4.2.min.css" />  
        <style>  
            *{  
                margin: 0;  
                padding: 0;  
            }  
            html, body{  
                height: 100%;  
            }  
            .swiper-container{  
                height: 100%;  
            }  
            .slide1{  
                background-color: red;  
            }  
            .slide2{  
                background-color: blue;  
            }  
            .slide3{  
                background-color: green;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="swiper-container">  
            <div class="swiper-wrapper">  
                <div class="swiper-slide slide1">Slide1</div>  
                <div class="swiper-slide slide2">Slide2</div>  
                <div class="swiper-slide slide3">Slide3</div>  
            </div>  
        </div>  
        <script src="js/swiper-3.4.2.min.js"></script>  
    </body>  
    <script>  
        var swiper = new Swiper(".swiper-container", {  
            direction: "vertical",  
        });  
    </script>  
</html>

现在已经可以实现滑动一屏的效果了