Magento2前端開發：使用手指左右滑動來切換Bootstrap 輪播區塊

在開始實作之前，我們要先確認已經將Bootstrap打包進我們的Magento主題包裡，詳細的操作可以參考之前分享的 如何在Magento2 使用 Bootstrap。

接下來我們要開始讓Bootstrap輪播可以支援手指左右滑動的動作。

因為Magento2 已經將jquery.mobile  的swipeleft, swiperight動作打包好了，所以我們直接叫出來用就好了。

建立Html Markup：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<?php echo $block->getViewFileUrl('Magento_Cms/images/slider-1.png') ?>">
      <div class="carousel-caption">
        slider-1
      </div>
    </div>
    <div class="item">
      <img src="<?php echo $block->getViewFileUrl('Magento_Cms/images/slider-2.png') ?>">
      <div class="carousel-caption">
        slider-2
      </div>
    </div>
    <div class="item">
      <img src="<?php echo $block->getViewFileUrl('Magento_Cms/images/slider-3.png') ?>">
      <div class="carousel-caption">
        slider-3
      </div>
    </div>
  </div>


  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

javascript：

require([
  'jquery', 
  'jquery.bootstrap', 
  'jquery/jquery.mobile.custom'
  ], function($) {

    $(function() {
        $('[data-ride="carousel"]').swiperight(function() {
            $(this).carousel('prev');
        });
        $('[data-ride="carousel"]').swipeleft(function() {
            $(this).carousel('next');
        });
    });

});

以上是針對Magento2前端文章介紹，如果有您有更多疑問可以詢問我們，未來會撰寫更多電商網站相關文章，您想知道什麼嗎？歡迎在下方留言給我們。或追蹤我們的粉絲專頁，就不錯過最新文章喔！

想學習更多Magento設定嗎？請見：Magento教學導覽