Initialize js function on the page

I have a js file where there is a function with multiple parameters

function initSlider(slider, sliderRow, slides, CLONES_COUNT, doAutoPlay) {
. . .
}

And I want to use this function on different pages, but with slightly different parameters, let’s say for one of the pages there will be

initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1)

The question is, how do I call this initialization function on the page itself?

The usual page for laravel, blade.php where at the end there is a section with scripts

@section('scripts')
<script src="/js/slider.js"></script>
@endsection

I tried like this

@section('scripts')
<script src="/js/slider.js"></script>
<script>
   $(document).ready(function(){
        initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);
   });
</script>
@endsection

I seem to be doing everything right, but I get errors

jQuery.Deferred exception: initSlider is not defined ReferenceError: initSlider is not defined at HTMLDocument. (http://test.loc/blog/article_1:730:9) at e (https://code.jquery.com/jquery-3.6.0.min.js:2:30038) at t (https://code.jquery.com/jquery-3.6.0.min.js:2:30340) undefined

Uncaught ReferenceError: initSlider is not defined at HTMLDocument. (article_1:730) at e (jquery-3.6.0.min.js:2) at t (jquery-3.6.0.min.js:2)

Answer

You need to call your function inside $(document).ready()

The .ready() method offers a way to run JavaScript code as soon as the page’s Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.

Explanation: Scripts get loaded asynchronously, thus it is not guaranteed that your script file will be loaded before you call the function. Using .ready() you make sure the function is called once everything else is loaded.

@section('scripts')
<script src="/js/slider.js"></script>
<script>
   $(document).ready(function(){
        initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);
   });
</script>
@endsection