# 2021-11-16 CSS - Swiper plug in - intro
###### tags: `CSS3 基礎實作` `2021/11/16` `進度筆記` `前端心得`
---

# 今日講課 -- 下午的部分

# Swiper

> 

> 

----

# 運作方式

- 所有東西都在 ↓
> 
> 他是一堆 div 塞在這個區塊內
> 他有設定 `overflow hidden` 去隱藏超過父層的所有東西 ↓
> 

# 這樣會爆出版面的原因
>  ↓
> 思考爆出去的原因
> 看是外框超過還是寬度

-----

# 可以調整

> 

----

# 如果要讓他無限跑

> 
> infinite loop
> 可以去找參數調整指令 ↓
> 

- Swiper 內的參數設定 ↓
> 

----

# 如果要讓他自動跑

> 
> 
> 5000 是 5 秒, 1500 是 1.5 秒

----

# Space between

> 
> 這邊是在講, between slides ↑

- 也就是在 Slides per view 的情況下 ↓
> 
> 每個 Slides 間的 between
> 可以讓 margin auto, 寬度降低點 ↓
> 

- 如果再設 block ↓
> 
> 就有 Slide 和 Slide 間的空格

----

# 如何讓圖片置中變大

>  ↓
> 分辨上下張 slide 的 active 位置
> 那就可以去 CSS對他做調整

- 去對他放大兩倍 ↓
> 

- 去對他放大 1.2 倍 和漸變 ↓
> 

- 或是 讓中間那張縮小 0.8 倍 ↓
> 
> 

----

# 讓左右兩側照片比較小

> 
> 

- 讓左右兩邊比較近 ↓
> 
> 

- 做出換圖效果 ↓
> 
> 

----

# 實際上做

- 可以下 opacity 對左右兩側圖片做遮罩
- 可以下 transition
- 可以用一堆 animation 去做控制

- 你還可以做到燈箱效果 ↓
> 
> 把輪播圖的點點控制換成圖片, 有燈箱效果

----

# 置中和心得分享

- 父層下 flex, 子層 margin auto

> 

flex, justify-content, align-items

- padding 快速實戰

padding 下在父層去推子層  

- margin 快速實戰

margin 下在子層去推父層

- margin 邊界重疊問題

像是 margin 下在 子層 
margin-bottom: 13px;

父層下 margin-top: 87px

疊起來不會是 100px

# 參考資料 - 邊界重疊問題
[Css系列 - 如何避免邊界重疊 ( Margin Collapsing ) · Issue #6 · marshal604/blog (github.com)](https://github.com/marshal604/blog/issues/6)

[理解邊界重疊的原因 \- CSS | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)

---

# 可以用卡片式的方法

- 比較好做 swiper
> 
> 也可以