如何在Magento2中调用Owl Slider

11

如果我们想在Magento 1.X中添加Owl Slider，请按照以下步骤操作。

  1. 复制owl.carousel.min.js并owl.carousel.js粘贴到skin/frontend/pakage_name/theme_name/js
  2. 复制owl.carousel.css并粘贴到skin/frontend/pakage_name/theme_name/css
  3. 转到app/design/frontend/pakage_name/theme_name/layout/page.xml并调用js和CSS

我们可以在Magento 1.X站点中的任何地方使用Owl Slider。

因此，在Magento 2中，我们如何调用“猫头鹰”滑块，应该在站点中的任何地方调用它，以便我可以随时使用。

对于我这个问题，我已经参考了此链接，但是它不符合要求，并且无法正常工作。

现在，我已将Owl滑块js放入其中，app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js但是它无法正常工作。

任何帮助，将不胜感激。

javascript  theme  magento-2.0.7  slider 
— 达瓦尔
source
2
我们也可以遵循此指南：boolfly.com/magento-2-slider-with-owl-carousel
— Khoa TruongDinh

Answers:

11

您必须requirejs-config.js在主题内创建一个文件，例如，

首先在其中添加owlcarousel.js文件，

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js

在其中添加您的CSS，

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

使用以下命令在您的tempalte文件中调用CSS，

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">

或根据需要在布局文件中调用CSS（最佳做法）：

  • 整个网站：default.xml例如app/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
  • 主页：cms_index_index.xml
<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

现在创建requirejs-config.js文件

Magento_Catalog/requirejs-config.js

定义滑块

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

现在，您可以在任何phtml文件下使用owlcarousel，

<div id="owlslider" class="products list items product-items">
   <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>

删除发布/静态文件夹内容并运行php bin/magento setup:static-content:deploy命令。

— 杰克迪亚（Rakesh Jesadiya）
source
但是我可以在哪里添加CSS？我需要在require.js文件中添加CSS？
— Dhaval '16
您不能将css添加到require.js文件中
— Rakesh Jesadiya '16
我有3个owl滑块文件owl.carousel.css，owl.carousel.js，owl.carousel.min，需要添加所有这些文件，以便在哪里可以添加和调用这些所有文件，以便无论我在哪里都可以在整个magento网站中使用想？
— Dhaval '16
app / design / frontend / pakage_name / theme_name / Magento_Catalog / web / css
— Rakesh Jesadiya
我有updatead答案plz检查
— Rakesh Jesadiya '16
9

首先，您需要将滑块放在

步骤1 themename/themename/Magento_Theme/web/js/owl.carousel.js

步骤2在主题名称/主题名称/Magento_Theme/requirejs-config.js中对该文件进行映射

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

第三步：我在下面的畅销书文件中使用过，其中需要包含滑块映射，主题名称/主题名称/Magento_Catalog/templates/product/bestseller_list.phtml：

<script>

    require([
        'jquery',
        'owlcarouselslider'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery("#best-seller-carousel").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

步骤4：该结构应如下所示，

<div id="demo">
<div id="best-seller-carousel">
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
    <div class="item"><h1>7</h1></div>
    <div class="item"><h1>8</h1></div>
</div>
</div>


您也可以访问更多链接@ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / using-requirejs-in-magento-2-implementing-owl-slider /

— 拉什维
source
任何时候。很高兴知道它对您
— 有用
你来自艾哈迈达巴德吗？
— Dhaval '16
我在requirejs-config.js中调用了owl滑块js，但是我的js没有显示在前端。你有什么主意吗？
— Dhaval '16
@watson删除pub / static文件夹的内容，然后运行php bin / magento setup：static-content：deploy命令。
— Rushvi '16
我做了很多次，但没有奏效。
— Dhaval '16
4

如果你想添加owl carousel的Magento 2方式，你应该遵循这些步骤。

  1. 复制owl.carousel.js到app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/。

  2. 添加您的requirejs模块app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js。

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

  3. 将requirejs配置添加到app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js。

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

如何使用：

  • 使用data-mage-init属性将“猫头鹰轮播”插入某个元素：

    <div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

  • 用于<script type="text/x-magento-init" />：

    <div id="owl-carousel" class="owl-carousel">
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

<script type="text/x-magento-init">
{
    "#owl-carousel": {
        "carousel": {"option": value}
    }
}
</script>
— Volodymyr Lisniak
source
0

其他两个答案非常好，我复制了两个元素，但是偶尔发现错误消息“ $不是函数”和“无法读取未定义的属性'fn'”的问题。我还想要一种以内容页面为中心的方法。

因此，这种组合方法可能对某人有帮助

  1. 将owl.carousel.js复制到app / design / frontend / vendorname / themename / Magento_Theme / web / js

（如果尚未创建目录，则创建目录）

  1. 其他css解决方案也可以使用，也可以将owl.carousel.css和owl.theme.default.css复制到主题的.Less文件中，然后根据您的喜好调整样式。
  2. 将以下代码复制到app / design / frontend /供应商名称 / 主题名称/Magento_Theme/require-config.js

（如果需要，请创建文件/目录，此代码似乎可以解决“无法读取FN的属性”的问题。）

var config = {
paths: {            
        'owlcarousel': "Magento_Theme/js/owl.carousel"
    },   
shim: {
    'owlcarousel': {
        deps: ['jquery']
    }
}
};

  1. 在页面内容中，放置以下代码以定义轮播图片

    <div class="owl-carousel owl-theme">
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
</div>

  2. 在上面的代码之后，为轮播添加以下代码（这似乎是为了解决“ $不是函数”错误）

    <script>
    require([
        'jquery',
        'owlcarousel'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery(".owl-carousel").owlCarousel({
                    nav: true, // Show next and prev buttons
                    navText:["<",">"], //show prev next
                    loop: true,
                    autoplay: true, //Set AutoPlay  
                    autoplayHoverPause: true, //stop when mouse on carousel
                    items : 1
          });
    });
</script>

  3. 部署静态内容，例如php magento setup：static-content：deploy（请注意，有多种方法可以执行此操作，其中包括手动清除缓存文件夹和php magento cache：clean命令）。

  4. 在网站上查看

— 郡男孩
source
我试过了，但是滑块不来了。虽然当我检查元素猫头鹰类确实添加到div时
— surbhi agr
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

您应该添加owl.carousel.min.jsmagento2

— 普拉卡什
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.