Intégration d'un carrousel

**chile** · 09/06/2023, 02h44

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

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

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

**chile** · 09/06/2023, 13h30

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

Code :

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

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 :

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

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 ?

**Séb.** · 09/06/2023, 13h53

Envoyé par chile

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

Code :

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

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

**chile** · 09/06/2023, 14h45

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 ?

**Séb.** · 09/06/2023, 14h49

Il faut intégrer jQuery (x3), comme sur CodePen dans la partie HTML tout en bas

Intégration d'un carrousel

jQuery

Vue hybride

Discussions similaires

Partager

Partager