# Day 02 Vue slider 輪播

###### tags: `Vue`

延續上一個章節 [Day 01 jQuery vs Vue 使用兩者render畫面](https://hackmd.io/-4RldgsPRli09svhhKsumw?both)延伸,做一個切換輪播帶連結功能,連結所有開發小實做


### 1.html把左右arrow 和文字title顯示畫面畫出來

css部分比較冗長下面附上jsfiddle.再點進去看

<div id="app">
        <section class="container">
            <div class="title">

                <h1>{{title}}</h1>

            </div>
            <img class="logo" v-bind:src="src">
          

            <div class="descrition">
                <a class="fas fa-arrow-circle-left fa-2x arrow-left" ></a>
                <div class="menuItem">
                    <span class="number"></span>
                    <span class="type"></span>
                    <a class="class-title" ></a>
                </div>
                <a class="fas fa-arrow-circle-right fa-2x arrow-right" ></a>
            </div>
        </section>
    </div>

### 2.data 綁入章節編號和所有章節data

章節序號為index , 起始為0 (0等於javascript 的第一個),將帶入章節物件命名menu , 並依序代入編號 , 章節分類 ,章節名稱等資料. Ps:也是menu array序列

[indexOf()](https://www.fooish.com/javascript/array/indexOf.html)

  let data = {
            src: './img/pngegg.png',
            title: 'Vue level Up ',
            index: 0,
            menu: [
                { type: '開發小實作', title: 'Day 01 jQuery vs Vue ', link: '' },
                { type: '開發小實作', title: 'Day 02  Vue slider ', link: '' },
                { type: '開發小實作', title: 'Day 03  Vue bind  data to form ', link: '' },
            ]
 }

### 3.把資料綁到畫面上

#### 3.1綁上編號

編號的命名為index , index起始是0 ,但是第一筆是1 ,所以要 **index + 1**

` <span class="number">{{index + 1}}</span>`

#### 3.2綁上章節分類

menu[index]為序列.type帶出章節分類資料
` <span class="type">{{menu[index].type}}</span>`

#### 3.3綁上章節名稱和url
綁上url部分使用**v-bind:href=""** , 標題章節 使用{{data}]方式綁定 ,
所以是
` <a class="class-title" target="vue-item" v-bind:href="menu[index].link">{{menu[index].title}}</a>`

*參考網路資訊*
[[ Vue.js 手牽手，一起嗑光全家桶 ] 開胃餐點 - 中式資料綁定佐無毒 jQuery 畫面處理](https://www.youtube.com/watch?v=68ItsYcqjHI&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=4)

*講師個人頻道資料很豐富,情況允許大家多多看完影片廣告,和每個月訂閱扣款donate,當做請講師喝杯咖啡犒賞辛苦無私 *

### 4.綁定畫面上一頁 & 下一頁資料

使用click觸發 <kbd>v-on:click=""</kbd> ,function名稱這邊命名為changeIndex,左邊頁數表達<kbd>-1</kbd>,右邊增加頁數<kbd>+1</kbd>

 <a class="fas fa-arrow-circle-left fa-2x arrow-left" v-on:click="changeIndex(-1)"></a>
 
 
  <a class="fas fa-arrow-circle-right fa-2x arrow-right" v-on:click="changeIndex(+1)"></a>

### 但純左右切換
在<kbd>data</kbd>下面新增<kbd>methods</kbd>,寫入<kbd>changeIndex</kbd>function .

methods: {
            changeIndex: function (change) {
                this.index += change

        }

這樣即可執行左右切換,但是會有一個問題,可以無止盡往左/右切換,打開chorm vue開發工具可以發現index可能是負值,而要切換回來必須多按加回正值才能往右切換,為了避免這種狀況發生,必須控制index數字最小值和最大值.


### 控制index value最大值/最小值
使用<kbd>if</kbd>,<kbd>else if</kbd>

 methods: {
                changeIndex: function (change) {
                    this.index += change
                   if (this.index < 0 ){
                       this.index = 0
                       
                 } else if (this.index > this.menu.length - 1){
                    this.index =  this.menu.length - 1
                   }
               
            }

index小於0時 , index = 0 , index大於最長長度時 , index = 最長長度.因為index起始是0 , 所以最長長度使用 <kbd>this.menu.length - 1</kbd> .

但是這種作法無法輪播,為了使用者方便,我們希望往右+1,或往左-1到底時,跳回第一個/最後一個再次循環.

輪播概念使用到數學的餘數.

### 使用數學餘數概念來做輪播效果

數學裡,**任何數字只要大於除數**,除3,餘數一定等於0,1,2不會超過3 ,除4 ,餘數為0,1,2,3之一,除5,餘數為1,2,3,4,以此類推假設除29,餘數一定等於0~28共29個,所以我們可以使用餘數來控制循環輪播.

而因為<knd>change</knd>有+1 ,也有-1 ,如果是第一張 1 ,(-1)為負數 ,負數除任何數都是負數,所以我們要做一點處理確保他一定是大於0.

 methods: {
                changeIndex: function (change) {
               
 this.index = (this.index + change + this.menu.length) % this.menu.length
                }
               
            }

以上程式碼意思為 index編號(餘數) = (this.index +- 1 +長度 ) / 長度

舉例我們有30張,編號為0~29 , 長度30 ,如果是第一張編號 0 ,往左click會是-1 ,實際上是要掉到編號29

*數字可以除比自己大的數字,只是商數為0 ,餘數 = 本身 ,請用[商餘數計算機](https://miniwebtool.com/zh-tw/quotient-and-remainder-calculator/)試算

#### 第一張照片往左切換
<kbd>this.index = 0 </kbd>

(0-1+30)/30 = 商數0 ,餘數 29 ,跳到最後一張照片

#### 最後一張照片往右切換
<kbd>this.index = 29 </kbd>

`(29+1+30)/30 = 商數2 ,餘數 0 ,跳到第一張照片`

### 優化重複性程式

<kbd>this.menu.length)</kbd>在畫面中出現兩次,而長度較長情況下影響干擾視覺,所以我們使用代數<kbd>longer</kbd>來優化 , <kbd> let longer = this.menu.length</kbd>

methods: {
changeIndex: function (change) {

let longer = this.menu.length
this.index = (this.index + change + longer) % longer
}

}
})

[Vue循環輪播原始碼參考](https://jsfiddle.net/Harrmonia/g8sqhea6/5/)

### 第一張照片-左邊按鈕關起 , 最後一張照片 - 最右邊按鈕關起

如果不喜歡循環輪播方式,另一種是第一張照片-左邊按鈕關起 , 最後一張照片 - 最右邊按鈕關起.

使用<kbd>v-if</kbd>

#### 第一章照片-最左邊按鈕關起

* 如果是編號0就藏起來
* 如果不是編號0就秀出來

以上兩者意思一樣, 在這裡使用*如果不是編號0就秀出來*

`index != 0
v-if="index != 0"
`

#### 最後一張照片 - 最右邊按鈕關起
* 如果是編號最後一碼就藏起來
* 如果編號不是最後一碼就秀出來

以上兩者意思一樣, 在這裡使用`如果編號不是最後一碼就秀出來`

index != this.menu.length - 1
//因為第一個是0 ,所以計算正確長度要 -1 

v-if="index != this.menu.length-1"


<kbd>v-if</kbd>這邊作法是,在html把它註解掉

[第一張照片-左邊按鈕關起 , 最後一張照片 - 最右邊按鈕關起原始碼](https://jsfiddle.net/Harrmonia/wsz40mj6/3/)