Heim >Web-Frontend >HTML-Tutorial >Grundlegende Verwendung von Swiper (4)
Grundlegende Verwendung von Swiper (4)
- 黄舟Original
- 2017-01-20 15:12:441096Durchsuche
Zuerst müssen wir eine einfache Swiper-Seite erstellen.
Vergessen Sie natürlich nicht, vorher die heruntergeladene Framework-Datei zu zitieren.
In diesem Kapitel haben wir das Festlegen der Breite und Höhe des Containers hinzugefügt
<!doctype html>
<html>
<head>
<title>在slide之间加上间隙</title>
<meta charset="utf-8">
<link rel="stylesheet" href="swiper.min.css">
<style>
body{
margin:0;
padding:0;
}
.swiper-Container{
width:500px;
height:300px;
margin:20px auto;
}
.swiper-slide{
text-align:center;
font-size:18px;
display:flex;
justify-content:center;
align-items:center;
background:#F2F2F2;
}
</style>
</head>
Danach haben wir noch das Layout einer einfachen Swiper-Seite entsprechend dem Inhalt von implementiert die erste Lektion
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">第一页</div>
<div class="swiper-slide">第二页</div>
<div class="swiper-slide">第三页</div>
<div class="swiper-slide">第四页</div>
<div class="swiper-slide">第五页</div>
</div>
<div class="swiper-pagination"></div> 16b28748ea4df4d9c2150843fecfba68
Dann fügen Sie einfach das Lückenattribut im js-Initialisierungscode hinzu
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination',
paginationClickable:true,
spaceBetween:30 //添加每个slide的间隙
});
</script>
</body>
</html>
Dadurch wird in der Mitte jeder Folienseite eine Lücke hinzugefügt.
Das Obige ist die grundlegende Verwendung von Swiper (4). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!