Slide show

**simj2709** · 28/10/2021, 01h32

Bonjour,

J'aimerais avoir une aide s'il vous plait, j'essaye de mettre sur ma page web un Slideshow mais mon code javascript me donne l'erreur suivante

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

pourtant j'ai bel et bien appelé l'élément par son nom de classe mais il me dit quand même que il ne voit pas à qui appliquer le style.
Merci

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
var slideIndex = 1;
showSlides(slideIndex);
 
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
    <head>
        <title>Boulangerie</title>
           <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
       <link href="https://fonts.googleapis.com/css2?family=Festive&family=Lobster&family=Roboto+Mono&family=Zen+Old+Mincho&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="CSS/style.css" type="text/css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
        <script src="script/script.js"></script>
    </head>
   <body>
      <div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="image/img1.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>
 
<div class="mySlides fade" >
  <div class="numbertext">2 / 3</div>
  <img src="image/img10.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>
 
<div class="mySlides fade" >
  <div class="numbertext">3 / 3</div>
  <img src="image/img11.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>
 
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
 
</div>
<br>
 
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
 
        <section id="image">
            <div class="wrapper"></div>
        </section>
 
        <section id="apropos">
            <div class="wrapper">
                <h1>A propos</h1>
                <p>Pains, pizza, tartes, brioches, fèvres au lard, sauce a spaghetti, conserves maison, sous marins, fromage</p>
                     <ul id="img-presentation">
                        <li id="item1"></li>
                        <li id="item2"></li>
                        <li id="item3"></li>
                    </ul>
            </div>
        </section>
        <section id="nosproduits">
            <div class="wrapper">
                 <h1>Nos produits</h1>
                   <ul id="img-presentation2">
                        <li><img src="image/img2.jpg" class="img-circle"></li>
                        <li><img src="image/img4.jpg" class="img-circle" ></li>
                        <li><img src="image/img7.jpg" class="img-circle" ></li>
                    </ul>
            </div>
        </section>
 
 
    </body>
</html>

Code CSS :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
img 
{
    vertical-align: middle;
   width:100%;
    height: 100%;
}
 
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
 
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
 
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

**Doksuri** · 28/10/2021, 14h17

**simj2709** · 28/10/2021, 14h23

Merci

, mais pas vraiment parce que une fois que je rafraichi ma page mon slide apparait après il disparait, pour q'une photo apparaisse il faut que je clique sur le DOT en bas

**simj2709** · 28/10/2021, 14h35

ça a résolu le problème de l'erreur que j'avais sur javacript merci

, mais mon image apparait une fois après le rafraichissement de ma page et disparait d'aussi tôt. pour la faire réapparaitre je dois cliquer dur le dot

Slide show

JavaScript

Discussions similaires

Partager

Partager