這陣子想到了一個問題：「如果要在沒有任何函式庫下實現＿＿功能，你會怎麼做？」因此希望能透過觀察其他人如何簡單地實現某些常用的互動效果，讓自己至少對「可以如何開始」有個簡單的頭緒。
這篇文記錄了我參考他人實現簡易輪播的做法，並分別記錄了有 JS 以及無 JS 的實現方式。
運用 JS 實現－－使用 scrollLeft
scrollLeft 是 HTML 元素中的屬性，可以透過其得知目前的向左捲動的距離。假設我們有一個 div 包了一個 div，外層使用 overflow-x: scroll 並使用 scroll-behavior: smooth 設定捲動行為，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
padding: 2rem;
width: 200px;
background-color: brown;
border: 2px solid black;
overflow-x: scroll;
scroll-behavior: smooth;
}
.inner {
padding: 10rem;
background-color: white;
width: 100vw;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, beatae!</div>
</div>
<script>
const box = document.querySelector('.box')
</script>
</body>
</html>
在 console 中改變 box.scrollLeft 的值，就能將其向右捲動一些。
接著就可以直接看實作的部分
這個輪播作法參考了這個 Codepen，不過邏輯有做一些對應的修改。核心的做法就是在父層給予一個最大寬度，並讓子層用 flex 排版。子層中的 img 鎖定寬度是 100%，圖片就會向右展開，然後透過 overflow-x: hidden 讓超出寬度的圖片可以被隱藏。
在 JS 部分，我改寫了大多數的邏輯，嘗試使用了 ES6 Proxy，並藉由一個 index 及 scrollLeft 去控制輪播的切換，這樣在實作上就可以專注在處理 index 的改變。藉由 index 的改變，setter 會先看傳入的新值是否為合法的值（大於 0 並且不大於圖片節點數量），如果合法就會給予 index 傳入的值，並計算當下的 scrollLeft 值並給予對應的 dot active 的 class。
不運用 JS 實現－－使用 HTML 錨點
HTML<a> 標籤的 href 屬性，除了可以讓使用者點擊時被帶往對應的頁面，當 href 中以 # 作為開頭，後方加上某個 HTML 元素的 id 名稱，點擊時就會捲動至該 HTML 元素所在的區塊。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.inner {
height: 50vh;
}
.box {
scroll-behavior: smooth;
overflow-y: scroll;
height: 100vh;
}
</style>
</head>
<body>
<a href="#target3">target3</a>
<div class="box">
<div id="target1" class="inner">target1</div>
<div id="target2" class="inner">target2</div>
<div id="target3" class="inner">target3</div>
<div id="target4" class="inner">target4</div>
</div>
</body>
</html>點擊 target3 連結時，畫面就會捲動至 #target3 div 所在區塊。
接著就是實作的部分：
這個輪播做法則是參考了這個 Codepen，保留了較為核心的 CSS 部分。在排版上也採用了類似的策略，透過 flex 及 overflow: hidden 讓子層的 img 在視覺上一次只顯示一張的樣子。在灰點中每個灰點都是一個帶有對應圖片 id 的 href 的錨點，點擊灰點時就會捲動至對應的區塊，也可以看到網頁上會出現錨點的位置。
關於製作簡易 Carousel 就記錄到這邊，這兩個做法主要都是運用捲動來實作，其實就是幾張圖片在一個盒子中左右捲動。如果內文有任何錯誤，也請不吝提出，謝謝。
References:
