(一)swiper入門
本節知識點
- Swiper初始化
(1)Swiper初始化
- 載入外掛
swiper.min.js(壓縮版本)
swiper.js - 外掛下載地址
https://3.swiper.com.cn/download/index.html - swiper初始化
必須要有兩個檔案
swiper.min.js和swiper.min.css - 引入
<link rel="stylesheet" href="css/swiper.min.css'">
<script src="js/swiper.min.js"></script>
(2)Swiper例項
<!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="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide {
font-size: 50px;
}
.swiper-slide:nth-of-type(1) {
background: blue;
}
.swiper-slide:nth-of-type(2) {
background: red;
}
.swiper-slide:nth-of-type(3) {
background: yellow;
}
</style>
<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>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', //垂直滑動
loop: true, //迴圈
// 如果需要分頁器
pagination: '.swiper-pagination', //分頁器
// 如果需要前進後退按鈕
nextButton: '.swiper-button-next', //下一個按鈕
prevButton: '.swiper-button-prev', //上一個按鈕
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
})
}
</script>
</html>
對應效果圖
相關文章
- 實現一個 Swiper
- swiper
- MassTransit 入門(一)
- SQLAlchemy入門(一)SQL
- 入門篇(一)
- MyBatis(一) 入門MyBatis
- GEF入門(一)
- spacy入門一
- Vue - SwiperVue
- MyBatis從入門到精通(一):MyBatis入門MyBatis
- SqlSugar ORM 入門到精通【一】入門篇SqlSugarORM
- 使用swiper.js建立巢狀的swiperJS巢狀
- Log4J入門教程(一) 入門例程
- Kotlin 入門(一)Kotlin
- Flutter入門篇(一)Flutter
- Nodejs入門(一)NodeJS
- JVM(一)-JVM入門JVM
- JS快速入門(一)JS
- Electron 入門指北(一)
- Scala入門教程 (一)
- Maven入門指南(一)Maven
- SQLite入門操作(一)SQLite
- 如何快速入門一門語言
- miniPrograms(Swiper)
- 一週入門angularJS(一)AngularJS
- NodeJs 入門到放棄 — 入門基本介紹(一)NodeJS
- RabbitMQ(一):RabbitMQ快速入門MQ
- MyBatis系列(一):MyBatis入門MyBatis
- Kafka除錯入門(一)Kafka除錯
- Mysql系列一:SQL入門MySql
- TypeScript 基礎入門(一)TypeScript
- Python入門之一Python
- Spring Security(一)入門Spring
- 入門微信小程式 (一)微信小程式
- JDBC入門(一):Statement物件JDBC物件
- 一文入門RedisRedis
- rabbitmq(一)-基礎入門MQ
- Netty(一):入門篇Netty