Карусель Owl не работает в magento 2
Я хочу добавить слайдер owl в пользовательскую тему в magento 2. Для этого я добавил:
\приложение\дизайн\интерфейс\Тема\пользовательский\веб\css\сова.карусель.мин.css \app\design\frontend\Theme\custom\web\js\owl.carousel.js
\app\design\frontend\Theme\custom\Magento_Theme\requirejs-config.js
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
map: {
'*': {
owlcarouselslider: 'Magento_Theme/js/owl.carousel'
}
}
};
\приложение\дизайн\интерфейс\Тема\пользовательский\каталог_магенто\шаблоны\featured2.phtml
<div id="demo">
<div id="owl-demo" class="best-seller-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
</div>
</div>
<script>
require([
'jquery',
'owlcarouselslider'
], function () {
'use strict';
jQuery.noConflict();
jQuery(".best-seller-carousel").owlCarousel({
autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
margin:5,
items : 5,
itemsDesktop : [1199,5],
itemsDesktopSmall : [979,5],
itemsTablet : [768,5],
navigation : true,
pagination : false
});
});
</script>
Но я получаю это
2 answers
Проблема в том, что вы вызываете jQuery в своем операторе require, но не передаете его в анонимную функцию. Вы вызываете глобальный jQuery, а не jQuery, определенный в Require JS. Когда вы передаете jQuery, вам не нужно использовать какие-либо функции noConflict, поскольку Require в первую очередь этого не позволит.
Попробуйте это:
<div id="demo">
<div id="owl-demo" class="best-seller-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'owlcarouselslider'
], function ($) {
'use strict';
$(".best-seller-carousel").owlCarousel({
autoPlay: 3000,
margin:5,
items : 5,
itemsDesktop : [1199,5],
itemsDesktopSmall : [979,5],
itemsTablet : [768,5],
navigation : true,
pagination : false
});
});
</script>
Нет необходимости проходить в карусель owl, так как это будет определено на странице, и поэтому функция будет "найдена".
Как кстати, всегда лучше не смешивать JavaScript с файлами шаблонов. Если вы хотите добавить файл сценария в свой шаблон, вы можете использовать что-то вроде этого:
<script type="text/x-magento-init">
{
"*": {
"Magento_Theme/js/custom-slider": {}
}
}
</script>
А затем создайте файл в своей теме по адресу app/design/frontend/{vendor_namespace}/{theme}/Magento_Theme/web/js/custom-slider.js
С js, как:
define([
'jquery',
'owlcarouselslider'
], function ($) {
'use strict';
$(".best-seller-carousel").owlCarousel({
autoPlay: 3000,
margin:5,
items : 5,
itemsDesktop : [1199,5],
itemsDesktopSmall : [979,5],
itemsTablet : [768,5],
navigation : true,
pagination : false
});
});
Я столкнулся с такой же проблемой на своем веб-сайте. Magento 2 использовал старую версию jquery , а также использовал миграцию js. Я просто удалил migrate js и обновил версию jquery на своем веб-сайте, и карусель после этого работала нормально.
Пожалуйста, попробуйте это и в вашем случае. Это также повлияет на другие плагины jquery на ваших сайтах, и вам нужно решить другие проблемы вручную, но все же это единственное решение, которое я нахожу.