Magento2 :owl carousel and other custom extension js not working on first time page load

Question

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>

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

Answer 2

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>

Answer 3

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.

Answer 4

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.