青岛网站建设新闻资讯

利用swiper制作全屏滚动首页

时间:2023-01-20 已阅读:230次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

开始编写首页前,需要先将全屏滚动弄好,我对比swiper和fullPage两个插件,还是决定使用swiper,毕竟swiper熟悉点,不用太多学习成本。

当我下载完最新版本的swiper,即目前的5.3.1版本,发现垂直滚动有些问题,开启鼠标滚动切换只能切换2-3个模板,而且感觉切换不顺畅。效果如下:


swiper-5.3.1.gif

然后再网上查询,发现别人用的是4.x版本的swiper,于是又去官网下载了4.5.3版本的swiper,虽然鼠标滚动切换很顺畅,但是不能满足业务需求。因为其他版块有切换动画,底部栏相比其他版块高度低很多,所以我需要的是从最后一个版块(底部)向上滚动切换到倒数第三个版块,而不是倒数第二个。效果如下:

swiper-4.5.3.gif


于是最后,还是swiper版本的问题,我决定和别人的版本一致,使用4.0.6版本的swiper,满足业务需求。效果如下:


swiper-4.0.6.gif

下面为模板代码:

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../static/css/reset.css">
<link rel="stylesheet" href="../static/css/index.css">
<link rel="stylesheet" href="../static/css/swiper-4.5.3.css"></head><body>
<main role="main">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide header">header</div>
<div class="swiper-slide">section 1</div>
<div class="swiper-slide">section 2</div>
<div class="swiper-slide">section 3</div>
<div class="swiper-slide">section 4</div>
<div class="swiper-slide footer">footer</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</main></body><script src="../lib/jquery-3.4.1.min.js"></script><!-- <script src="../lib/swiper-5.3.1.js"></script> --><!-- <script src="../lib/swiper-4.5.3.js"></script> --><script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.js"></script><script>$(function() {
const mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', // Slides的滑动方向-垂直
mousewheel: true, // 开启鼠标滚轮控制Swiper切换。
speed: 500, // 切换速度
slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。'auto'则自动根据slides的宽度来设定数量。
touchRatio: 0, // 触摸比例。 设置为0时,完全无法滑动
spaceBetween: 10, // slide之间距离(demo用于区分slide, 实际开发可删除)

// 分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
})
})</script></html>
.autoPage {
width: 100%;
height: 100%;}html,
body,
main {
position: relative;
height: 100%;
background-color: #f5f5f5;}.swiper-container {
width: 100%;
height: 100%;}.swiper-container .swiper-wrapper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
font-weight: bold;
color: #000;
background: #fff;}.swiper-container .swiper-wrapper .header,
.swiper-container .swiper-wrapper .footer {
height: 200px;}




二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1370.html

相关资讯

我有建站需求

*请正确填写需求信息,我们最快会在1小时内与您取得联系!
注:如果想获取实时咨询报价,您可以拔打业务经理手机186-5321-9163或扫码添加客户经理微信咨询。

Copyright © 2022 青岛青华互联网站建设公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图