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

Try this:

var config = {
    '*': {
        'owlcarousel': 'js/owl-carousel/owl.carousel'
    },
    shim: {

        'owlcarousel': {
            deps: ['jquery']
        }

    }
};

Add above code in your custom require js config file code.

var config = {
    map: {
        '*' : {
            'owlcarousel' : 'js/owl-carousel/owl.carousel',
            'twitter' : 'js/twitter/widgets'
        }
    }
};

So it will be like this:

var config = {
    '*' : {
        'owlcarousel' : 'js/owl-carousel/owl.carousel',
        'twitter' : 'js/twitter/widgets'
    },
    shim: {

        'owlcarousel': {
            deps: ['jquery']
        }

    }
};

The problem is you are calling jQuery in your require statement but you are not passing it into the anonymous function. You are calling the global jQuery and not the jQuery defined by Require JS. When you pass in jQuery, you don't have to use any noConflict functions as Require wouldn't allow that in the first place.

Try this:

<div id="demo">
    <div id="owl-demo" class="best-seller-carousel">
        <div class="item"><h1>1</h1></div>
        <div class="item"><h1>2</h1></div>
        <div class="item"><h1>3</h1></div>
        <div class="item"><h1>4</h1></div>
        <div class="item"><h1>5</h1></div>
        <div class="item"><h1>6</h1></div>
        <div class="item"><h1>7</h1></div>
        <div class="item"><h1>8</h1></div>
    </div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owlcarouselslider'
        ], function ($) {
            'use strict';
                $(".best-seller-carousel").owlCarousel({
                autoPlay: 3000,
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

There is no need to pass in owl carousel as that will be defined on the page and the function will therefore be "found".

As a side note, it is always better to not mix your JavaScript in with your template files. If you wanted to pull in a script file in your template you could use something like this:

<script type="text/x-magento-init">
{
  "*": {
    "Magento_Theme/js/custom-slider": {}
  }
}
</script>

And then create a file in your theme at app/design/frontend/{vendor_namespace}/{theme}/Magento_Theme/web/js/custom-slider.js

With js like:

define([
    'jquery',
    'owlcarouselslider'
    ], function ($) {
        'use strict';
            $(".best-seller-carousel").owlCarousel({
            autoPlay: 3000,
            margin:5,
            items : 5,
            itemsDesktop : [1199,5],
            itemsDesktopSmall : [979,5],
            itemsTablet : [768,5],
            navigation : true,
            pagination : false
      });
});