Script ne se charge pas au chargement de la page

**Franjuju** · 01/04/2019, 20h17

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
  });
});