Script ne se charge pas au chargement de la page

Bonjour à tous,

Je viens vous demander votre aide car je suis bloqué et je suis encore débutant en JS. En effet, j'ai téléchargé une bibliothèque qui s'appelle OwlCarousel pour pouvoir faire un carousel et je l'ai modifié pour pouvoir l'adapter à mes envies.

Mon problème : La pagination que j'ai faite fonctionne très bien cependant, lorsque je viens de charger la page, elle n’apparaît pas et c'est seulement une fois que j'ai fait défiler mon carrousel une fois, que ma pagination apparaît.

Voici mon HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body onload="init();"> <!-- ceci appelle une autre fonction de ma page html mais je vous affiche que le code qui concerne mon carrousel-->
  <div id="cover-1">
    <div id="container-1">
      <div id="carousel-1" class="slider owl-carousel owl-theme">
        <div> <img class="item-1" src="images/Affiche1.jpg"></div>
        <div> <img class="item-1" src="images/Affiche1.jpg"></div>
        <div> <img class="item-1" src="images/Affiche1.jpg"></div>
      </div>
    </div>
    <div class="owl-nav">
      <div id="block-rouge-prev"></div>
      <div class="owl-prev-carousel-1"><</div>
      <div id="block-rouge-next"></div>
      <div class="owl-next-carousel-1">></div>
    </div>
    <div class="slider-counter"></div>
  </div>
</body>

Voici mon JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function () {
  $('#carousel-1').owlCarousel({
    /*autoplay: true,
    autoplayTimeout: 13000,*/
    loop:true,
    margin:10,
    dots:false,
    nav:false,
    responsiveClass:true,
    responsive:{
      0:{
        items:1,
      },
      600:{
        items:1,
      },
      800:{
        items:1,
      },
      1000:{
        items:1,
        loop:true
      }
    }
  });
  var owl = $('#carousel-1');
    owl.owlCarousel();
    // Go to the next item
    $('.owl-next-carousel-1').click(function() {
      owl.trigger('next.owl.carousel');
    })
    // Go to the previous item
    $('.owl-prev-carousel-1').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
  });
  $('#carousel-1').on('initialized.owl.carousel changed.owl.carousel', function(e) {
  if (!e.namespace) {
    return;
  }
  var carousel = e.relatedTarget;
  $('.slider-counter').text(carousel.relative(carousel.current()) + 1 + '/' + carousel.items().length);
  });
});

Lorsque je rafraîchis ma page, la pagination ne s'affiche pas
Pièce jointe 463063

Une fois que j'ai fait défiler une première fois mon carrousel, la pagination s'affiche
Pièce jointe 463064

Merci énormément pour toute aide que vous pourrez m'apporter :)