[web design] Slick Slider(3)加入dots篇

續[web design]Slick Slider(2)在Slider下方加入點點

㐃對就是上面這些點點㐃

上次我們是引用網址中的.js檔，這次我們直接把github上面的專案載下來，再設定好.js的路徑，還有新增.css的路徑，最後修改一下.js就好了！

1、下載專案到你要地方（也可以看slick slider作者自己的教學）

2、在body結束前加上：

<script type="text/javascript" src="XXX/slick/jquery-1.11.0.min.js"></script>   
    
<script type="text/javascript" src="XXX/slick/jquery-migrate-1.2.1.min.js"></script>
    
<script type="text/javascript" src="XXX/slick/slick.min.js"></script>
(上面粗體地方改成自己的路徑)

3、head中加入

<!-- slick slider CSS -->
<link rel="stylesheet" type="text/css" href="XXX/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="XXX/slick/slick-theme.css"/>
(上面粗體地方改成自己的路徑)

4、最後，在.js加上這兩句就好了

$(".yourClassName").slick({
    dots:true,//這一句！！！！！！！！
    dotsClass: 'slick-dots',//還有這一句！！！！！！！
    infinite: true,
    rtl:false, // If RTL Make it true & .slick-slide{float:right;}
    autoplay:true, 
    autoplaySpeed:5000, //  Slide Delay
    speed:800, // Transition Speed
    slidesToShow:4, // Number Of Carousel
    slidesToScroll:1, // Slide To Move 
    pauseOnHover:false,
    appendArrows:$(".Container1 .Head1 .Arrows1"), // Class For Arrows Buttons
    prevArrow:'<span class="Slick-Prev"></span>',
    nextArrow:'<span class="Slick-Next"></span>',
    easing:"linear",
    responsive:[
      {breakpoint:979,settings:{
        slidesToShow:3,
      }},
      {breakpoint:753,settings:{
        slidesToShow:2,
      }},
      {breakpoint:528,settings:{
        slidesToShow:1,
      }},
    ],
  })