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.