[web design] Slick Slider(2)調整參數篇

續[web design] Slick Slider(1)螢幕大小＆每頁顯示幾個區塊

本篇重點：調整斷點（breakpoint）！
避免圖片因螢幕尺寸改變而被切到或變形。

先來看發生了什麼:

兩張被切割的慘狀><

再來看看調整後的結果：

調整breakpoint後^__^

Ｑ：如何做到？
Ａ：要在上篇中講到的.js檔中改以下參數：

responsive:[
      {breakpoint:979,settings:{
        slidesToShow:3,
      }},
      {breakpoint:753,settings:{
        slidesToShow:2,
      }},
      {breakpoint:528,settings:{
        slidesToShow:1,
      }},
    ],
//這些斷點數字需識圖片大小調整，也要動手自己去條瀏覽器大小後決定
//3,2,1的粗體數字表示，要有幾張圖在畫面中

本篇結束～～～～～～～～～～～～～～～END

另外~
若要讓網頁中同時有“兩個”slide區塊可以這樣做，

（先看圖）

兩個slider區塊示意圖

原.html：

<div class="Container">
        <h3 class="Head"> <span class="Arrows"></span></h3>
        <div class="SlickCarousel">
             ...
           ...
             ...
        </div>
</div>

新增：

<div class="Container1">
        <h3 class="Head1"> <span class="Arrows1"></span></h3>
        <div class="SlickCarousel1">
           ...
          ...
           ...
        </div>
</div>

當然.css,.js的部分也要改~但也只要複製一份加上“1”就好了w（超懶 喂！