文章彙整

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

By Astral Web 5 months agoNo Comments
首頁  /  Magento  /  Magento-2  /  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教學導覽

 

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。