Owl Magento 2 中的轮播无法正常工作

Question

Owl Magento 2 中的轮播对我来说工作不正常。

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

有人知道解决办法吗？（下图是它的样子）。

这就是我添加Owl轮播：

requirejs-config.js 在 Magento_Catalog

owl.carousel.css 在 Magento_Catalog/web/css

owl.carousel.js 在 Magento_Catalog/web/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>

Owl Magento 2 中的轮播无法正常工作

Owl Carousel in Magento 2 not working correctly

magento

magento2

owl-carousel

owl-carousel-2