6

I am using owl carousel on my magento 2 website. I have created a custom module for that.

While I am loading my website first time owl carousel slider is not appearing,.

When I move to other page and comeback to home page slider is appearing.

Can anyone help on this.

requirejs-config.js

var config = {
    map: {
        "*": {
            bannerowlcarousel: "Vendor_Banner/js/owl.carousel.min"
        }
    }
};

banner.phtml

<script type="text/javascript">
    require([
        'jquery',
        'bannerowlcarousel'
    ], function ($) {
        $("#banner-slider-demo-1").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: true,
            nav: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            navText: ["<em class='icon-left'></em>","<em class='icon-right'></em>"]
        });
    });
</script>
8
  • share your code here Jan 4, 2017 at 6:40
  • please check the updated question.
    – rajat kara
    Jan 4, 2017 at 7:00
  • please let me know if you have issue. Jan 4, 2017 at 7:16
  • have you done static content deploy .
    – Amit Bera
    Jan 4, 2017 at 7:19
  • yes i did that.
    – rajat kara
    Jan 4, 2017 at 7:20

4 Answers 4

1

requirejs-config.js :

var config = {
"map": {
    "*": {
        "OwlCarousel": "<vodeorname>_<modulename>/js/owl-carousel"
    }
}

};

phtml Template :

<?php $items = $this->getItemCollection()->getData(); ?>

<div id="owl-demo" data-mage-init='{
"OwlCarousel":{
    "autoPlay": 3000,
    "items" : 2,
    "itemsDesktop" : [1199,3],
    "itemsDesktopSmall" : [979,3]
   }
 }'>
   <?php foreach ($items as $item) { ?>
    <div class="item"><img src="<?php echo $this->imageurl . $item['item_image']; ?>" alt="Owl Image"></div>
<?php } ?>
</div>

Let me know if you have an issue.

1

The probable issue is that when you load your page first time your owlcarousel is not initialized and later on when you refresh your page once it does. You can try initializing without configuration first i.e as below:

<script type="text/javascript">
    require([
        'jquery',
        'bannerowlcarousel'
    ], function ($) {
        $("#banner-slider-demo-1").owlCarousel();
        $("#banner-slider-demo-1").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: true,
            nav: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            navText: ["<em class='icon-left'></em>","<em class='icon-right'></em>"]
        });
    });
</script>
0

Just change your requirejs-config.js file code,

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

Remove var and clear cache.

1
  • Have you checked using above method? Jan 6, 2017 at 6:06
0

Try adding domReady! as a require JS dependency, this will ensure the carousel is not initialised until the page has loaded.

<script type="text/javascript">
    require([
        'jquery',
        'bannerowlcarousel',
        'domReady!'
    ], function ($) {
        // Your code
    });

I also recommend adding your script in a JS file rather than a template.

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.