首页>Magento>source

我尝试在自定义模块中实现owl轮播滑块,然后如何 在Magento2中调用猫头鹰滑块

我的phtml文件

<div class="products list items product-items owlslider">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>       
  </ul>
</div>
    <script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $(".owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
    </script>

应用程序/代码/供应商/模块名/视图/前端/网络/ JS /需要-config.js

var config = {
    paths: {            
            'owlcarousel': "web/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

我收到脚本错误未捕获错误:脚本错误:owlcarousel

最新回答
  • 2019-12-5
    1 #

    最好不要编写内联脚本,最好使用js组件,如下所示:

    phtml的代码   文件

    <div class="products list items product-items">
       <ul id="owlslider">
         <li><img src="some image" /></li>
         <li><img src="some image" /></li>
         <li><img src="some image" /></li>      
      </ul>
    </div>
    <script type="text/x-magento-init">
        {
            "#owlslider": {
                "carousel": {
                        "navigation" : true,
                        "center": true,
                        "margin":10,
                        "responsiveClass":true,
                        "responsive":{
                            "0":{
                                "items":1,
                                "nav":true
                            },
                            "600":{
                                "items":2,
                                "nav":true
                            },
                            "1000":{
                                "items":3,
                                "nav":true
                            }
                        }
                    }
            }
        }
        </script>
    

    requirejs-config.js的代码

    var config = {
        map: {
            '*': {
                'carousel': 'js/carousel',
                'owlCarousel': 'js/owl.carousel.min'
            }
        }
    };
    

    然后,我放了 carousel.js   和 owl.carousel.min.js   在 web/js   在我的模块中。

    carousel.js中的代码

    define([
        'jquery',
        'owlCarousel'
    ], function($) {
        return function(config, element) {
            $(element).owlCarousel(config);
        };
    });
    

    您可以根据需要修改代码和轮播配置。

  • magento 1.9:如何在我的自定义模块控制器中使用核心模块(observerphp)的动作方法。
  • magento 2.1:如何在后端编辑产品时保存自定义数据库表中的自定义字段?