響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第四階段】w3.css協助專案設計

縱向式Carousel設計

推薦仍可使用已載入的 Slick Slider

在右下角區域內增加以下HTML:

<!-- slick slider start -->
<ul class="sliderNews">
  <li><a href="javascript:;"><img src="images/carousel/car1.jpg"></a>
    <span>1</span>
    <p>電腦ECU+進排氣系統之基本改裝 《BMW F10 M5》輕鬆提升115hp動力輸出 電腦ECU+進排氣系統之基本改裝 《BMW F10 M5》輕鬆提升115hp動力輸出</p>
  </li>
  
  <li><a href="javascript:;"><img src="images/carousel/car2.jpg"></a>
    <span>2</span>
    <p>23萬美元落槌  福特《Ford Apollo Edition Mustang》順利售出 23萬美元落槌 福特《Ford Apollo Edition Mustang》順利售出</p>
  </li>
  
  <li><a href="javascript:;"><img src="images/carousel/car3.jpg"></a>
    <span>3</span>
    <p>電腦ECU+進排氣系統之基本改裝 《BMW F10 M5》輕鬆提升115hp動力輸出 電腦ECU+進排氣系統之基本改裝 《BMW F10 M5》輕鬆提升115hp動力輸出</p>
  </li>
  
  <li><a href="javascript:;"><img src="images/carousel/car4.jpg"></a>
    <span>4</span>
    <p>23萬美元落槌  福特《Ford Apollo Edition Mustang》順利售出 23萬美元落槌 福特《Ford Apollo Edition Mustang》順利售出</p>
  </li>
  
  <li><a href="javascript:;"><img src="images/carousel/car5.jpg"></a>
    <span>5</span>
    <p>電腦ECU+進排氣系統之基本改裝 《BMW F10 M5》輕鬆提升115hp動力輸出 電腦ECU+進排氣系統之基本改裝 《BMW F10 M5》輕鬆提升115hp動力輸出</p>
  </li>
  
  <li><a href="javascript:;"><img src="images/carousel/car6.jpg"></a>
    <span>6</span>
    <p>23萬美元落槌  福特《Ford Apollo Edition Mustang》順利售出 23萬美元落槌 福特《Ford Apollo Edition Mustang》順利售出</p>
  </li>
</ul>
<!-- slick slider end -->

增加 Script 程式,將準備好的HTML交給slick程式控制

<script>
  $('.sliderNews').slick({
    vertical: true
    ,speed: 500
    ,autoplay: true
    ,autoplaySpeed: 4000
    ,slidesToShow: 4
    ,slidesToScroll: 1
  });
</script>

接著加以設計 CSS 樣式