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

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

2 Answers 2

Reset to default
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.

Improve this answer
5
  • 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
    Commented Mar 26, 2019 at 11:18
  • in your point no 3 'owlcarousel' : 'js/owl.carousel.min' replace it with 'owlcarousel' : 'js/owl.carousel'
    – Magento_Bhurio
    Commented Mar 26, 2019 at 13:01
  • I tried that as well and no luck
    – GeorgeM
    Commented Mar 26, 2019 at 13:24
  • the solution that you provided did't work for me so how i accept the answer
    – GeorgeM
    Commented Mar 27, 2019 at 13:46
  • ok No Problem I'm sorry..
    – Magento_Bhurio
    Commented Mar 27, 2019 at 18:03
0

change template file

<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepage_slider')->toHtml();?>
<script type="text/javascript">
    require([
        'jquery',
        'owlcarousel'
    ], function ($, owl) {
        '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>

change requirejs-config.js

Add file owl.carousel.min.js Magento_Theme/web/js/owl.carousel.min.js

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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