0

I am creating a custom theme and I need to add banner slider in the home page. I try to use owl carousel and it’s not working. Can you please help

Her is how I try to add slider to home page

1 created a custom home page layout under Magento_Theme/page_layout/1column.xml with below code

 <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="div" htmlClass="page-header" before="-" />
        <container name="gm-slideshow" as="gm-slideshow" label="Page Slideshow Container" htmlTag="div" htmlClass="gm-slideshow" before="main.content">
        <block class="Magento\Framework\View\Element\Template" name="homepage_slider" template="Magento_Theme::html/slider.phtml" />
        </container>

        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer" htmlTag="div" htmlClass="page-footer" />
    </referenceContainer>
</layout>

2. created a template file page layout under Magento_Theme/template/html/slider.phtml with below code

 <?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepage_slider')->toHtml();?>
<script type="text/javascript">
    require([
        'jquery',
        'owlcarousel'
    ], function ($) {
        'use strict';
        $(".gm_home_banner").owlCarousel({
            autoPlay: 3000,
            margin:5,
            items : 5,
            itemsDesktop : [1199,5],
            itemsDesktopSmall : [979,5],
            itemsTablet : [768,5],
            navigation : true,
            pagination : false
        });
    });
</script>

3 created a requirejs-config.js under Magento_Theme with below code

    var config = {
    paths: {
        'owlcarousel' : 'js/owl.carousel.min'
    },
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
}

4 added my css under default_head_blocks.xml

  <?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script src="js/owl.carousel.js"/>
        <css src="css/owl.carousel.css"/>
        <css src="css/bootstrap.css"/>
        <css src="css/george_custom.css"/>

    </head>
    <body>

    </body>
</page>

5 Then I created a custom block from the Magento backend with below code

    <div class="gm_home_banner owl-carousel">
<div class="item"><img src="{{media url="wysiwyg/George/180.jpg"}}" alt="" /></div>
<div class="item"><img src="{{media url="wysiwyg/George/181.jpg"}}" alt="" /></div>
</div>

Slider not loading but it shows the two images

  • Are you getting any error in console? – Amit Naraniwal Mar 26 at 5:23
  • did you check if css are actually loaded? – fmsthird Mar 26 at 5:36
  • @ Amit Naraniwal- No error in console – GeorgeM Mar 26 at 11:08
  • @magefms- Yes css loaded – GeorgeM Mar 26 at 11:09
0

You Need to update your owl-carousel script look like:

require(["jquery",'Owlcarousel'], function($,Owlcarousel){
$( document ).ready(function() {
    /*This For HomePage Brand Slider.*/
    $(".gm_home_banner").owlCarousel({
        autoPlay: 3000,
        margin:5,
        items : 5,
        itemsDesktop : [1199,5],
        itemsDesktopSmall : [979,5],
        itemsTablet : [768,5],
        navigation : true,
        pagination : false
    });
});
});

You need to update your point number 5 PHTML File. like this :-

<div class="gm_home_banner owl-carousel owl-theme">
  <div class="item"><img src="{{media url="wysiwyg/George/180.jpg"}}" alt="" /></div>
  <div class="item"><img src="{{media url="wysiwyg/George/181.jpg"}}" alt="" /></div>
</div>

Add Whole Class of Owl Carousel in your phtml File

owl-carousel owl-theme

you have not define Owlcarousel in your function.please check your code.

  • I update the code based on your recommendation still slider not working, also i get this error . "Uncaught TypeError: Cannot read property 'fn' of undefined at VM4626 owl.carousel.js:1713 at VM4626 owl.carousel.js:1750" – GeorgeM Mar 26 at 11:18
  • in your point no 3 'owlcarousel' : 'js/owl.carousel.min' replace it with 'owlcarousel' : 'js/owl.carousel' – Magento_Bhurio Mar 26 at 13:01
  • I tried that as well and no luck – GeorgeM Mar 26 at 13:24
  • the solution that you provided did't work for me so how i accept the answer – GeorgeM Mar 27 at 13:46
  • ok No Problem I'm sorry.. – Magento_Bhurio Mar 27 at 18:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.