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

4-8. 首頁: 寬度滿版的 Slider 設計

學習 jQuery plugin 外掛程式的基本運用

(一)瀏覽器搜尋外掛「jquery plugin slider」 => 檢視 Example
　　(1) 試試 Slick Slider 　　(2) 試試 Swiper Slider
(二)下載外掛程式 →點選 Get it now 或是 Get Started →點選 Download => 解壓縮
(三)網頁內設計步驟 (How to use) --------- 點選網站中右上角【Install】按鈕
１、處理相關的 HTML 標籤語法
２、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
３、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
４、在 <script> </script> 標籤之中，將網頁元素物件依作者指示交給外掛程式。
５、如有需要再加上 option 選項設定，如有需要再修改 CSS 樣式設定。

 

試試 Slick Slider：

STEP-1：在 main 區域內增加以下HTML

<!-- slick slider start -->
<div class="slider">
  <div><img src="images/index/slider_bg1.jpg" alt="" width="100%"></div>
  <div><img src="images/index/slider_bg2.jpg" alt="" width="100%"></div>
  <div><img src="images/index/slider_bg3.jpg" alt="" width="100%"></div>
</div>
<!-- slick slider end -->

STEP-2、3：在 head 區增加以下連結及載入

<!--  jquery 函式庫  -->
<script src="js/jquery-3.3.1.min.js"></script>

<!--  slick plugin start  -->
<link rel="stylesheet" href="js/slick-1.8.1/slick/slick.css">
<link rel="stylesheet" href="js/slick-1.8.1/slick/slick-theme.css">
<script src="js/slick-1.8.1/slick/slick.min.js"></script>
<!--  slick plugin end  -->

STEP-4：增加 Script 程式，將準備好的HTML交給slick程式控制

<script>
  $('.slider').slick();
</script>

STEP-5：增加 Option 選項，設定自動播放

<script>
  $('.slider').slick({
      autoplay: true,
      autoplaySpeed: 4000
    });
</script>

參考 Slick Slider 的各種 Demos 及 Settings 設定各種需要的Option選項

試試 Swiper Slider：

STEP-1：在 main 區域內增加以下HTML

<!-- Slider main container -->
<div class="swiper-container mySwiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="images/index/slider_bg1.jpg" alt="" width="100%"></div>
    <div class="swiper-slide"><img src="images/index/slider_bg2.jpg" alt="" width="100%"></div>
    <div class="swiper-slide"><img src="images/index/slider_bg3.jpg" alt="" width="100%"></div>
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

</div>
<!-- slick slider end -->

STEP-2、3：在 head 區增加以下連結及載入

<!--  swiper plugin start  -->
<link rel="stylesheet" href="js/swiper/swiper-bundle.min.css">
<script src="js/swiper/swiper-bundle.min.js"></script>
<!--  swiper plugin end  -->

或是直接使用CDN

<!--  swiper plugin start  -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!--  swiper plugin end  -->

STEP-4：增加 Script 程式，將準備好的HTML交給slick程式控制

<script>
  var swiper = new Swiper(".mySwiper", {
    autoplay: {
      delay: 2500
    },
    // If we need Navigation arrows
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    // If we need pagination
    pagination: {
      el: ".swiper-pagination",
    },
  });
</script>

參考 Swiper Slider Demo 的各種 Demos 再由「Open in new window」 去看看設定各種需要的Option選項

 

 

go TOP