用swiper制作全屏网站上下滚动效果
之前做过一次,今天又要做一个新网站,突然发现忘记怎么搞了,现在记录一下。
上次制作用的是Swiper5,有bug,滚动不流畅。今天发现bug已经解决了,继续用最新版来写。
全部代码如下:
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>光谷pc站</title> <link rel="stylesheet" type="text/css" href="style/swiper.min.css"/> <link rel="stylesheet" type="text/css" href="style/common.css"/> </head> <body> <div class="swiper-container"> <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 class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </div> <script src="js/swiper.min.js" type="text/javascript"></script> <script> var swiper = new Swiper('.swiper-container', { direction: 'vertical', }); </script> </body> </html>
css
@charset "utf-8"; html, body { position: relative; height: 100%; margin: 0; } .swiper-container{ width: 100%; height: 100%; }
这次我主要卡在了css的html和body的高度上。以上代码已经为最简洁代码,可以复制使用了。