Question

Magento 2中的Owl Carousel无法正常工作。

我可以左右移动它，但是图像堆叠在彼此的下方，而不是像旋转木马那样彼此相邻。

有人知道解决方案吗？（下图是它的外观）。

这就是我添加“猫头鹰轮播”的过程：

Magento_Catalog中的

requirejs-config.js

Magento_Catalog / web / css中的

owl.carousel.css

Magento_Catalog / web / js中的

owl.carousel.js

模板文件中包含以下内容：

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

<div id="owlslider" class="">
    <ul>
        <li><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg"></li>
        <li><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg"></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 : 1
                });
            });
        });
    })();
</script>

Answer 1

您可以像这样使用Java脚本

<script>
    require(['jquery', 'owlcarousel'], function($) {
           $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds
                    items : 1
                });

    });
</script>

或尝试

<script>
    require(['jquery', 'mgzOwlCarousel'], function($) {
    $("#owlslider").owlCarousel({
                        navigation : true, // Show next and prev buttons
                        autoPlay: false, //Set AutoPlay to 3 seconds
                        items : 1
                    });

        });
    </script>

Magento 2中的猫头鹰轮播无法正常工作

1 个答案: