Carrousel d'images

Bonjour,

cette question est à décomposer en plusieurs parties et si les réponses sont simples et pratiue elles dépendent aussi des particularités que vous voulez. Et bien sûr de vos connaissances dans ces 3 technologies qui sont employées simultanément mais s'appliquent à différents "niveaux" ou plutôt pour différents "rôles".

La gallerie d'image en elle même et les possibilités interactives et l'animation en elle même.

Description / rappel des rôles des différents langages dans une page:

HTML sert à indiquer des contenus et leurs valeurs sémantiques et hiérarchiques.Exemple: un texte courant peut êre indiqué par la balise "p"(pour paragraphe) et une image par la balise "img"(pour image). Tandis qu'une balise de type h1,h2...jusqu'à h6 permet d'indiquer un titre au "blocs" contenus de la page. Chaque choffre correspondant à l'importance/hiérarchoe du contenu ayant le titre. h1 indiquant un titre principal à l'ensemble des contenus de la page(de préférence unique) tandis que h2 indiquera un niveau secondaire d'importance du contenu possédant le titre, h3 un contenu de niveau 3 d'importance/hiérarchie etc...

CSS sert à modifier la présentation des contenus(balises) HTML, par exemple leur taille et leur position, la présence ou non d'un cadre, de marges, de taille et polices de caractéres d'un texte, pour chaque ou plusieurs ou tout les éléments. CSS permet aussi d'ajouter des animations et quelques autres possibilités de la même manière(voir les sélecteurs CSS).

CSS est donc nécessaire et complémentaire du HTML pour avoir autre chose qu'un texte sur fond noir et pas très beau mais interdépendant de la structure de la page exprimée par HTML. Il est donc important conceptuellement de séparer les contenus(leur structure exprimée par HTML) de leurs formes(l'affichage qui sera effectué dans le navigateur).

JavaScript est un langage de programmation(script interprété par le navigateur) qui permet d'intervenir sur les éléments HTML et CSS et leurs contenus et d'utiliser de les traiter en tant que valeurs (ou plutôt données) pour les exploiter, par exemple pour un calcul ou changer le contenus existants, ajouter ou supprimer des contenus; par exemple dans le cadre de ce qui s'appelle l'interactivité, c'est à dire relier une action(ou événement) faite par l'utilisateur au résultat voulu(fonctionnalité).

Cas pratique:

Ainsi pour afficher une image en HTML on indique par une balise image qui doit contenir un attribut de balise "src" indiquant le chemin d'accès hypertexte(ou URL) où est disponible l'image ainsi que l'attribut "alt" qui indique la description de cette image.
 

<article id="diaporama">

<img id="monimage" src="image1.jpg" alt="joli paysage" />

<button type="button" id="imagesuivante"> image suivante</button>

</article>

CSS va donc permettre d'ajouter un cadre à l'image aussi bien que de modifier la taille d'affichage de l'image que la position de cette image par rapport à l'organisation des autres balises HTML(avant, après et autour pour signifier l'imbrication des balises pour ce dernier cas). Cela se fait par l'ajout de régles (ou styles) qui sont des paramètres possibles pour HTML et l'affichage qui est désiré.
 

#monimage{

padding-left:10%;/* ajoute une marge interne à gauche à la balise image ayant l'id monimage de 10% de la valeur totale par défaut, donc  correspond à un décalage de 10% vers la droite de l'image*/

width=90%; /* indique que l'image doit prendre 90% de la valeur disponible dans son container soit ici la balise article contenant l'image.*/

}

JavaScript qui fonctionne dans le navigateur permet de changer les attributs src et alt de cette image. Pour le relier à lappui sur le bouton il est nécessaire de détecter le clic sur le bouton et de l'y relier. Cela peut se faire comme ceci:

document.getElementById('imagesuivante').addEventListener('click', function(e){
console.log('le bouton '+e.target+' est cliqué')/** informations de vérification invisble pour l'utilisateur*/
  document.getElementById('monimage').src="image2.jpg";
  document.getElementById('monimage').alt="un bâtiment"
})

Ce qui se traduirait en langage humain par :

lorsque il y a clic sur le bouton ayant l'id 'imagesuivante' fait ceci(exprimé par function) : change la valeur src de l'élément ayant l'id 'monimage' pour "image2.jpg" puis change la valeur alt de l'image ayant l'id 'monimage' pour la valeur "un bâtiment"

Bien sûr cet exemple n'est pas encore un carroussel, ceci afin d'expliquer le principe d'un changement lors d'un clic qui pourra être complexifié par l'ajout d'une liste d'images qui doit être affiché et la position dans cette liste (image 1 de la liste, image 2 de la liste, image 3 etc...) qui permet de savoir quelle est l'image précédente et suivante afin d'indiquer celle désirée.

Le résultat que le navigateur affichera sera donc :

<img id="monimage" src="image2.jpg" alt="un bâtiment" />

L'animation:

Il existe 2 façons de faire des animations en CSS. L'une en utilisant "transition" et l'autre en utilisant la méthode @keyframes.

Il y a aussi la possibilité de faire des animations plus complexes et précises avec JavaScript mais qui est plus complexe car basée sur la programmation(tandis que CSS n'est pas de la programmation mais la description de propriétés que doivent avoir des éléments HTML de la page dans la page). Je ne rentrerait pas donc pas dans le sujet car cela n'est pas nécessaire pour ce que vous voulez et cela est bien plus avancé à comprendre.

La méthode "transition" de CSS suffisant amplement pour répondre à votre question on va s'intéresser à celle ci:

https://developer.mozilla.org/fr/docs/Web/CSS/transition

Comme vous pouvez voir dans les exemples du lien il y a bien une animation mais ce n'est pas vraiment ce que l'on veut puisque celle ci a lieu lors du survol de l'élément à animer avec la pseud o classe CSS :hover.

Alors dans ce cas nous pouvons utiliser une class CSS et ajouter l'animation en changeant la classe CSS de la même manière(et au même "endroit") que lorsque nous avons modifié l'attribut src indiquant la source et dont l'imge à afficher et son attribut indispenable descriptif "alt".

Donc

1) écrire dans une classe la régle d'animation CSS avec qui permet de faire une animation de déplacement vers la droite(par exemple en changeant la valeur de la marge pour une valeur supérieure) et de changer la transparence: "opacity" permet cela comme indiqué ici : https://developer.mozilla.org/fr/docs/Web/CSS/opacity

2)rajouter la classe crée dans la fonction du JavaScript utilisé lors du clic.

Cela se fait avec ELEMENTHTML.className

https://www.w3schools.com/jsref/prop_html_classname.asp

Cela rajoutera une ligne(à la suite des changements de valeur de src et alt et entre les accolades délimitant la fonction) dans la fonction effectuée lors du clic qui pourrait ressembler à ceci:

document.getElementById('monimage').className="monanimation";

Voilà si vous ne comprenez pas des notions et le HTML, CSS ou Javascript de mes exemples vous pouvez utiliser le manuel pour voir l'explication de chacune des notions, par exemple pour a détection du clic et son fonctionnement.

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Si par contre vous avez du mal avec les explications du manuel (que ce soit pour HTML , CSS ou JavaScript) c'est qu'il vous manque des bases de ces langages et dans ce cas orientez vous vers des cours et tutos gratuit en faisant une simple recherche "apprendre CSS" ou "apprendre "JavaScript"  par exemple..

Note IMPORTANTE : Je me suis contenté d'expliquer le principe à utiliser avec un cas le plus simple possible, il est bien sûr que c'est insuffisant pour ce que vous voulez, incomplet voire inexact pour certains détails. Si vous avez le principe vous avez l'essentiel et il ne vous manque que la syntaxe et cela passe par de la pratique. Donc commencez par décomposer et travailler chaque étape vous manquant séparément: HTML rôle et utilisation, CSS et son application avec les sélecteurs, les animations CSS, les bases de JavaScript (syntaxe, utilisation et fonctions) puis des cas pratiques de plus en plus complexes (c'est plutôt ludqiue de faire ses propres animations je trouve) et proches des différentes étapes à effectuer pour votre carroussel et une animation lors de celles ci. Il existe aussi des cours tutos complets que vous trouverez facilement comme par exemple:

https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery

https://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

NOTE 2 : Il existe des scripts tout fait proposant ce que vous voulez à intégrer à votre page et qui comprendront HTML , CSS et JavaScript. Vous pouvez chercher du côté de "lightbox" mais bien sûr intégrer et utiliser celle ci nécessiteront quelques connaissances de bases en intégration HTML, CSS et JS. Sinon il y a les CMS qui utilisent des modules mais c'est autre chose encore.

Merci pour votre réponse !

J'ai déjà quelques notions des langages HTML, CSS et JavaScript.

J'ai donc réalisé un pseudo carrousel (voir code ci-dessous) mais l'effet de transition ne me convient pas du tout.

En effet, avec mon code, les images apparaissent en superposition comme un gif alors que j'aimerais que les images glissent les unes à la suite des autres.

Et je n'ai, malheureusement, pas trouvé de code permettant de faire cet effet de transition en glissement.

Voici donc mon code HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Slider</title>
    <link rel="stylesheet" href="diaporama.css">
  </head>
  <body>
    <div class="slide-container">
      <div class="custom-slider fade">
        <div class="slide-index">1 / 3</div>
        <img class="slide-img" src="1.jpg">
        <div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
      <div class="custom-slider fade">
        <div class="slide-index">2 / 3</div>
        <img class="slide-img" src="2.jpg">
        <div class="slide-text">Nullam luctus aliquam ornare. </div>
      </div>
      <div class="custom-slider fade">
        <div class="slide-index">3 / 3</div>
        <img class="slide-img" src="3.png">
        <div class="slide-text">Praesent lobortis libero sed egestas suscipit.</div>
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>
    <div class="slide-dot">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
    </div>
  </body>
  <script src="diaporama.js" charset="utf-8"></script>
</html>

CSS :

.custom-slider { display: none; }
.slide-container {
    max-width: 800px;
    position: relative;
    margin: auto;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: black;
    font-size: 30px;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.6s ease;
}
.prev{ left: 15px; }
.next { right: 15px; }
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.5);
}
.slide-text {
    position: absolute;
    color: black;
    font-size: 30px;
    padding: 15px;
    bottom: -80px;
    width: 100%;
    text-align: center;
}
.slide-index {
    color: #ffffff;
    font-size: 13px;
    padding: 15px;
    position: absolute;
    top: 0;
}
.slide-img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}
.slide-dot{ text-align: center; }
.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #999999;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #111111; }
.fade {
    animation-name: fade;
    animation-duration: 1s;
}
@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}

JavaScript :

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("custom-slider");
  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";
}

// fonction pour faire défiler le diaporama automatiquement toutes les 3 secondes
function autoSlide() {
  plusSlides(1);
  }
  
  setInterval(autoSlide, 3000);

Salut à tous,
Tu veux un truc comme ici ? (cadre du haut avec défilement des billets). C'est mon site perso, billetophilie).
Cdlt !

Bonjour,

Non, je voudrais que les images défilent de droite à gauche

comme les pubs en haut de ce site

Cordialement

Le lien du site que j'évoquais a disparu.

C'est https://www.epresse.fr