Intégration d'un carrousel

Version imprimable

Bonjour,

Depuis quelques jours j'essaye tout simplement d'insérer un carousel su rmon site, depuis des modeles sur codepen.

Le soucis est que chaque modele que j'insère, ne fonctionne pas, et est en position vertical.

Voici le modele https://codepen.io/elethompson/pen/GpXXXW

Voici le résultat sur mon site https://refonte.chili-voyage.com/index_test.php

Voici mon coede page que j'ai vidé au maximun pour chercher le soucis

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
<html>
  <head>
    <link rel="stylesheet" href="css/style_carousel.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css"><!-- CAROUSEL --> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css"><!-- CAROUSEL --> 
    <!-- FLIP CARD -->
    <script src="js/monjava.js"></script>
    <script src=""></script>
    <script src=""></script>
<!-- CAROUSEL INDEX --> 
  </head>
  <body>
<!------------------------------- DÉBUT CAROUSEL ------------------------------->
<!-- Create your own class for the containing div -->
<div class="slick-carousel">
  <!-- Inside the containing div, add one div for each slide -->
  <div>
    <!-- You can put an image or text inside each slide div -->
    <img src="http://placekitten.com/g/320/240">
  </div>
  <div>
    <img src="http://placekitten.com/g/320/240">
  </div>
  <div>
    <img src="http://placekitten.com/g/320/240">
  </div>
  <div>
    <img src="http://placekitten.com/g/320/240">
  </div>
  <div>
    <img src="http://placekitten.com/g/320/240">
  </div>
</div>
  </body>
</html>

Quelqu'un aurait une idée ? merci

09/06/2023, 06h11
Séb.

Cela ne semble pas être un problème lié à PHP ou une base de données.

Le modèle CodePen intègre jQuery, que je n'ai pas repéré sur ta maquette.

Console JS => Uncaught ReferenceError: $ is not defined

j'ai en lien mon fichier monjava.js, avec le code java du modele
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Basic initialization is like this: // $('.your-class').slick(); // I added some other properties to customize my slider // Play around with the numbers and stuff to see // how it works. $('.slick-carousel').slick({ infinite: true, slidesToShow: 3, // Shows a three slides at a time slidesToScroll: 1, // When you click an arrow, it scrolls 1 slide at a time arrows: true, // Adds arrows to sides of slider dots: true // Adds the dots on the bottom });
avec aussi un ficher style_carousel.css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* Defines the width of the carousel and centers it on the page */ .slick-carousel { margin: 0 auto; width: 1000px; } /* The width of each slide */ .slick-slide { width: 350px; } /* Color of the arrows */ .slick-next::before, .slick-prev::before { color: blue; }
J'ai vraiement essayé plein de chose et isolé ce code pour enlever tout risque de conflit avec d'autre code.

Et il se passe la même chose avec d'autres codes carousel.

Ni y a t-il pas la possibilité d'un soucis plus en amont, chez l'henbergeur ?

Citation:

Envoyé par chile

j'ai en lien mon fichier monjava.js, avec le code java du modele

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Basic initialization is like this:
// $('.your-class').slick();
 
// I added some other properties to customize my slider
// Play around with the numbers and stuff to see
// how it works.
$('.slick-carousel').slick({
  infinite: true,
  slidesToShow: 3, // Shows a three slides at a time
  slidesToScroll: 1, // When you click an arrow, it scrolls 1 slide at a time
  arrows: true, // Adds arrows to sides of slider
  dots: true // Adds the dots on the bottom
});

C'est du JavaScript, pas du Java, et jQuery n'est toujours pas inclus.

Vois le forum JavaScript si besoin ;)

09/06/2023, 14h45
chile

Effectivement, lorsque je teste sur codepen en suppriamnt la partie java, j'ai le même résultat que sur mon site, un affichage vertical non opérationnel.

Mais comment puis je faire reconnaitre ce code javascript ?
09/06/2023, 14h49
Séb.

Il faut intégrer jQuery (x3), comme sur CodePen dans la partie HTML tout en bas ;)
12/06/2023, 03h12
chile

Bonjour, merci pour ton aide.

En plaçant mon lien script en fin de page et non début, ça fonctionne :D