0
J'ai un problème avec le diaporama CSS que j'ai implémenté dans mon projet de passion actuel, dans lequel aucune image par défaut n'est affichée lors du chargement de la page web. Lors de la navigation/point presse, les images sont affichées avec succès, mais je n'arrive pas à comprendre le petit fragment de code (probablement absent de la fonction Javascript) qui afficherait la première image sur le chargement de la page. J'ai tenté d'ajouter simplement la classe "active" à l'image désirée, mais cela ne fait qu'apparaître le bouton 'point' actif sans qu'aucune image correspondante ne soit affichée. Apprécierait toute aideJavascript - CSS Slideshow n'affiche pas l'image par défaut
Voici le code:
var slideIndex = 1;
function plusSlides(n) {
'use strict';
showSlides(slideIndex += n);
}
function currentSlide(n) {
'use strict';
showSlides(slideIndex = n);
}
function showSlides(n) {
'use strict';
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";
}* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 400px;
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;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add see-through background */
.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;
}
/* */
.transition {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* */
.active,
.transition:hover {
background-color: #222;
}
/* 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
}
}<div class="homePage">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/2</div>
<img src="graphics/logo.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/2</div>
<img src="graphics/1.jpg" style="width:100%">
<div class="text"></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="transition" onclick="currentSlide(1)"></span>
<span class="transition" onclick="currentSlide(2)"></span>
<br>
</div>
Où est le code CSS? –
Pour une raison quelconque j'ai négligé de l'implémenter. Mettre à jour maintenant – Jordy