Как реализовать карусель совы в теме luma в Magento 2?

Question

Как реализовать карусель совы в теме luma в Magento 2?

Изображения для слайдера следует выбирать в панели администратора. Я новичок в magento. Пожалуйста, скажите мне, как реализовать карусель совы. Я не хочу использовать бесплатные расширения.

Я включил ссылку на файл css в cms_page_view.xml вот так ->

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="Magento_Cms::css/owl.carousel.css" />

</head>
<body>
    <referenceContainer name="content">
        <block class="Magento\Cms\Block\Page" name="cms_page"/>
    </referenceContainer>
</body>

Правильно ли это?

1

magento2 slider owl-carousel

Author: Kowsigan Atsayam, 2019-08-05

Source

1 answers

score 2 · Accepted Answer

Поскольку вам нужна конкретная тема для luma, я предлагаю вам сделать это в модуле leve.

Добавить requirejs-config.js файл в app/code/Vendor/Module/view/frontend/requirejs-config.js добавить запись js owlcarousel:

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

Затем добавьте свой файл owl js в: app/code/Vendor/Module/view/frontend/web/js/owl.carousel.js

После этого вам необходимо выполнить команду развертывания внешнего интерфейса.

Затем вы можете вызвать карусель owl в любом файле 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
          });
    });
});

Надеюсь, это поможет