WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-10. 首頁: 縱向式 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 樣式

 

 

go TOP