Карусель совы в Magento 2 работает неправильно

Owl Carousel в Magento 2 у меня работает неправильно.

Я могу перемещать его влево и вправо, но изображения располагаются друг под другом, а не рядом друг с другом, как в карусели.

Кто-нибудь знает решение? (изображение ниже, как это выглядит).

введите здесь описание изображения

Вот что я сделал, чтобы добавить Owl Carousel:

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>

magento owl-carousel owl-carousel-2 magento2
person Zaedian    schedule 25.09.2019    source источник
comment
За исключением случаев, когда я перетаскиваю карусель, я получаю следующую ошибку:   -  person Zaedian    schedule 25.09.2019
comment
[Вмешательство] Невозможно предотвратить Default внутри пассивного прослушивателя событий, поскольку цель рассматривается как пассивная. См. ‹URL›   -  person Zaedian    schedule 25.09.2019
comment
Сайт находится на локальном веб-сервере. Хотя все остальное работает нормально. Просто проблема с отображением изображений друг под другом.   -  person Zaedian    schedule 25.09.2019
comment
Давайте продолжим обсуждение в чате.   -  person Jinesh    schedule 25.09.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать такой 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>
person Jinesh    schedule 25.09.2019