Magento 2 - OWL Carousel 2 in related products issue

Question

I try to setup OWL Carousel for Related Products in Magento 2.

I overwrite this file: Magento_Catalog/templates/product/list/items.phtml

this is my custom code:

 <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>

But my owl carousel it not display well, I mean inline. My owl carousel items are now one under the other.

enter image description here

What I do wrong there?

Thank you in advance.

Answer 1

in your theme app/design/frontend/Vendor/YourTheme/requirejs-config.js add owlcarousel js entry:

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

then call owl carousel in any phtml file or js file using this:

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
 });
 });
});

Hope this will resolve issue.

Answer 2

In Magento 2,You can use this simple module for any slider. https://github.com/vrajeshkpatel/magento2-owlcarousel

• Shoaib Munir: Good plugin shared. +1 :)