前端輪播套件：Owl Carousel

前言

開始

// html
// 因為 markdown 關係，每個標籤都有空格，如需使用，記得移除
// 當點擊 back，會跳轉到該 hash 

    < div class="owl-carousel" >
        < div data-hash="slide1" style="background:red;"> Your Content 第一頁
          < button class="next" >click< /button>    
        < /div>
        < div data-hash="slide2" style="background:yellow;"> Your Content 第二頁
            < button class="next">click< /button>    
            < a href="index.html#slide1">back< /a>
        < /div>
    < div>

// javascript

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
        items: 1,  // 每頁有多少筆
        loop: false,
        center: true,
        mouseDrag: false, // 滑鼠拖曳
        touchDrag: false, // 觸控拖曳
        pullDrag: false,
        URLhashListener: true, //紀錄 a 標籤，如上面的 data-hash="slide1"
        startPosition: 'URLHash', // 可為 string / number
        dotsContainer: '.custom-dots', // nav bar 的名稱
        responsiveRefreshRate: 0, // 每多久計算一次 client 瀏覽器寬度
        responsive: {   // 不同 width 下的調整
          0: {
            margin: 0,
            autoWidth: false
          },
          992: {
            autoWidth: false
          }
        }

    });

    // next.owl.carousel 事件，可以跳轉至下一張 slide
    $('.next').click(function () {
        $(".owl-carousel").trigger('next.owl.carousel')
      
      })

  });