carrousel jquery

Grophies
Javascript

Bonjour,

j'ai créé un carrousel en jquery dont voici le code :
HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

        <title>jQuery</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <main>
            <div class="container">
                <ul>
                    <li><button id="slider-previous" title="Image précédente"><i class="fa fa-backward"></i></button></li>
                    <li><button id="slider-next" title="Image suivante"><i class="fa fa-forward"></i></button></li>
                </ul>

                <figure id="slider" class="slider">
                <img src="images/1.jpg" alt="Photo du carrousel">
              <figcaption>Street Art</figcaption>
            </figure>
            </div>
        </main>

        <script src="main.js"></script>
    </body>
</html>

CSS :

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: "Open Sans", sans-serif;
    overflow-y: scroll;
    text-align: center;
}

main
{
    min-width: 320px;
    width: 96%;
    margin: 0 auto;
}

ul
{
  display: none;
}

li
{
  list-style: none;
  display: inline-flex;
}

.slider img
{
  height: 300px;
  width: 700px;
}

img
{
  max-width: 100%;
}

@media all and (min-width:992px)
{
    main
    {
        width: 60%;
        max-width: 1350px;
    }
}

JavaScript:

"use strict";   // Mode strict du JavaScript

/*************************************************************************************************/
/* ****************************************** DONNEES ****************************************** */
/*************************************************************************************************/
var $slides = // La liste des slides du carrousel.
[
    { image: 'images/1.jpg', legend: 'Street Art'          },
    { image: 'images/2.jpg', legend: 'Fast Lane'           },
    { image: 'images/3.jpg', legend: 'Colorful Building'   },
    { image: 'images/4.jpg', legend: 'Skyscrapers'         },
    { image: 'images/5.jpg', legend: 'City by night'       },
    { image: 'images/6.jpg', legend: 'Tour Eiffel la nuit' }
];

var $state; // Objet contenant l'état du carrousel.

/*************************************************************************************************/
/* ***************************************** FONCTIONS ***************************************** */
/*************************************************************************************************/
function onSliderGoToNext()
{
    $state.index++; // Passage à la slide suivante.

    if($state.index === $slides.length) // Est-ce qu'on est arrivé à la fin de la liste des slides ?
    {
    $state.index = 0; // Oui, on revient au début (le carrousel est circulaire).
    }

    refreshSlider(); // Mise à jour de l'affichage.
}

function onSliderGoToPrevious()
{
    $state.index--; // Passage à la slide précédente.

    if($state.index < 0) // Est-ce qu'on est revenu au début de la liste des slides ?
    {
    $state.index = $slides.length - 1; // Oui, on revient à la fin (le carrousel est circulaire).
    }

    refreshSlider(); // Mise à jour de l'affichage.
}

function onSliderToggle()
{
  setInterval( function() { onSliderGoToNext(); }, 5000 );
}

function refreshSlider()
{
  // Recherche des balises de contenu du carrousel.
  // Changement de la source de l'image et du texte de la légende du carrousel.
  $("#slider img").attr("src", $slides[$state.index].image);
  $("#slider figcaption").text($slides[$state.index].legend);
}

/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
document.addEventListener("DOMContentLoaded", function()
{
        // Pour éviter les conflits avec d'autres frameworks js qui utilisent également le symbole $.
        jQuery(document).ready(function($)
        {
      $("ul").css("display", "block");

      $state = {}; // Initialisation du carrousel.
            $state.index = 0; // On commence à la première slide.

            refreshSlider(); // Affichage initial.
      $("#slider-next").on("click", function() { onSliderGoToNext(); });
      $("#slider-previous").on("click", function() { onSliderGoToPrevious(); });
      onSliderToggle();
        });
});

J'ai appelé toutes les images en javascript plutôt qu'en html, cela évite d'utiliser position: absolute; ou float: left/right; qui fait sortir les images en dehors du flux. J'ai affiché uniquement la première image en html. Mais pour les améliorations suggérées à la fin du tp, je ne sais pas comment faire. J'ai essayé dans la fonction refreshSlider avec fadeIn, mais ça ne marche pas. Est-ce que vous avez une idée comment faire puisque je n'ai pas utilisé display: none; et display: block; ?

Merci.

Aucune réponse