# JS圖片輪播功能

### 範例：[兩種JS圖片輪播](https://codepen.io/liu_0821/pen/ZEZqKwr)

> 太太太太太常寫到關於輪播的功能了，雖然現在有些套件已經省了不少時間，欸但是當要客製化或是想要針對各種變化去做修改，當然是少不了必須了解它的原理，所以決定寫這篇文章順便記錄一下！ ~~(也方便我之後回來回顧XD)~~

---

## **第一種輪播功能之切換**

### **HTML & CSS**
>> 這裡快速說明一下需要注意的小地方

* 首先看到上方圖片為拆解圖，可以看到圖片使用<font color="cake">`potision`</font>集中堆疊，之後再利用<font color="cake">`opacity`</font>透過透明度的變化搭配<font color="cake">`transition`</font>過渡，做出漸出漸入的感覺。
* 順帶一提，如果在子層使用<font color="cake">`potision`</font>，記得父層也要跟著使用唷！

### **JavaScript**
>> 利用監聽左右按鈕的點選，去判斷變數的變化，進而改變元素的`Class Name`去做控制。

* 首先，設定一個變數為0，此變數為判定哪張圖片要出現的基準。

 let number = 0;

* 接下來，設定監聽並增加至我們的按鈕上，並區分成往左往右兩個區塊。

// 左邊 || Pre
number--;
if(number < 0){
    // 當number等於負數時，則會回到最後一張
    number = carousel01.length-1;
}

// 右邊 || Next
number++;
if(number > carousel01.length-1){
    // 反之，當number大於最大值時，則會回到第一張
    number = 0;
}

* 最後，到此步驟就可以動了，但感覺太單調，那可以加入漸入漸出特效，利用迴圈以及前面設定的變數判定需要加特效的元素！

carousel01.forEach(carousel=>{
    carousel.classList.remove("active");
    carousel01[number].classList.add('active');
});

---

## 第二種輪播功能之滑動

### **HTML & CSS**
>> 這裡快速說明一下需要注意的小地方


* 首先看到上方圖片為拆解圖，可以看到圖片多了一層`紅色外框`包住，<font color="cake">注意這是必須的!!!</font>(有點像是底片相機運行的方式)
* `紅色外框`有什麼是必須設定的呢？

width: 包含所有圖片之最大寬度 + "px";
display:flex; 
flex-wrap: nowrap;  // 讓內部圖片不換行呈現

* 如何做出滑動的特效呢？

transform: translateX(0px); // 設定平移
transition: transform .5s ease; // 設定過渡方式

### **JavaScript**
>> 利用監聽左右按鈕的點選，判斷變數值進而改變`translateX`數值。

* 首先，設定變數為0，此變數為紀錄`translateX`平移量。

let width = 0;

* 接下來，設定監聽並增加至我們的按鈕上，並區分成往左往右兩個區塊。

// 左邊 || Pre
width = width + 360;
if(width>0){
     // 當width大於0時，則會回到最後一張
    width=-1440;
}

//右邊 || Next
width = width - 360;
if(width<=-1800){
    // 當width大於最大寬度時，則會回到第一張
    width=0;
}

//更動
show.style.transform = "translateX("+width+"px)";

##
### 其他範例
### [輪播1](https://codepen.io/liu_0821/pen/QWPOGOy)、[輪播2](https://codepen.io/liu_0821/pen/yLwzzQy)、[輪播3](https://codepen.io/liu_0821/pen/rNProrr)

##

## 輪播套件
>> 還要寫程式太麻煩啦！如果今天想直接套套件，那可以使用以下套件：
> （裡面的說明都寫得很完全就不另外介紹拉XD）

* **CSS套件：**[**Bootstrap5 Carousel**](https://bootstrap5.hexschool.com/docs/5.0/components/carousel/)
* **JS套件：**[**SwiperJS**](https://swiperjs.com/demos)、[**SlickJS**](https://kenwheeler.github.io/slick/)

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果註解哪裡有錯誤或有問題，歡迎提出來一起討論~~~~