Magento 2 - Карусель СОВЫ 2 в выпуске сопутствующих товаров

Я пытаюсь настроить карусель OWL для сопутствующих товаров в Magento 2.

Я перезаписываю этот файл: Magento_Catalog/templates/product/list/items.phtml

Это мой пользовательский код:

            <div  id="owlslider" class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
                <ol class="products list items product-items">
                     ...............
                </ol>
            </div>

<script type="text/javascript" xml="space">


    (function  () {
        require(["jquery","owlcarousel"],function() {
            'use strict';
            jQuery.noConflict();
            jQuery(document).ready(function() {
                jQuery("#owlslider").owlCarousel({
            autoplay: true,
            dots: false,
     loop:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }


                });
            });
        });
    })();
</script>

Но моя карусель с совой плохо отображается, я имею в виду встроенную. Мои предметы карусели совы теперь находятся один под другим.

enter image description here

Что я там делаю не так?

Заранее благодарю вас.

Author: Robert, 2019-07-06
Source

2 answers

В вашей теме app/design/frontend/Vendor/YourTheme/requirejs-config.js добавьте запись js owlcarousel:

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

Затем вызовите owl carousel в любом файле phtml или файле js, используя это:

require(['jquery','myowl'],function($){
    $(document).ready(function(){

        // the below must be as per your requirement

        $("#owlslider").owlCarousel({
            navigation : true,
            autoplay: true,
            autoplayHoverPause: false,
            autoplaySpeed: 2000,
            loop: true,
            smartSpeed: 450
          });
    });
});

Надеюсь, это решит проблему.

 2
Author: Shoaib Munir, 2019-07-06 15:00:02

В Magento 2 вы можете использовать этот простой модуль для любого слайдера. https://github.com/vrajeshkpatel/magento2-owlcarousel

 1
Author: Vrajesh Patel, 2019-07-07 13:27:43