---
# System prepended metadata

title: '0623'
tags: [lax.js, Swiper, 跨裝置企業平台與資料庫整合設計班, Bootstrapt]

---

0623
===

(二)Bootstrapt跨裝置網站框架應用(術)伊君毅

---

## 昨天　Bootstrapt 檢討
要改成使用　Swiper

## Swiper 教學
[swiper](https://swiperjs.com/)
[中文api - Swiper中文网](https://www.swiper.com.cn/api/)
常用設定:
* autoplay
* loop
* delay
建立一個 class 包住 swiper 物件
可以控制 swiper 物件的大小 例如，搭配 Bootstrapt　網格

### Swiper 練習
- [x] 1. Default Setup
- [x] 2. 加入 Navigation 和 Pagination 功能
- [x] 3. 加入 loop mode 和 Auto play 功能
- [x] 4. 將 Swiper 搬進 Bootstrap One Page

* height: 100vh 記得減掉 navbar 的高度

Observer 預設 false 設成 true 會檢查是否有更新 有更新會刷新畫面


## lax.js
[lax.js](https://github.com/alexfoxy/lax.js)


## [iPhone 11 Pro - Apple (台灣)](https://www.apple.com/tw/iphone-11-pro/)
停住在畫面頂端 sticky

[position:sticky 示例](https://www.cnblogs.com/coco1s/p/6402723.html)


###### tags: `跨裝置企業平台與資料庫整合設計班` `Bootstrapt` `Swiper` `lax.js`