[jQuery]améliorations tp carrousel

Sujet résolu

18 avril 2018 à 13:45:39

Bonjour,

pour le tp du carrousel en jquery, j'ai fait comme ceci :

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.

me_moi

19 avril 2018 à 14:35:07

Finalement, j'ai résolu mon problème grâce au css, le grid layout nouvellement sorti est tout bonnement génial, fabuleux, avec, il n y a définitivement plus besoin d'utiliser position absolute pour empiler des éléments et les faire se chevaucher les uns au-dessus des autres, z-index peut être utilisé avec le grid layout, mais pour le coup, je n'ai eu besoin de z-index. Voici mon code au cas où quelqu'un serait intéressé :

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">

				<div id="carrousel">
					<ul>
						<li><img src="images/1.jpg" alt="Street Art" /></li>
						<li><img src="images/2.jpg" alt="Fast Lane" /></li>
						<li><img src="images/3.jpg" alt="Colorful Building" /></li>
						<li><img src="images/4.jpg" alt="Skyscrapers" /></li>
						<li><img src="images/5.jpg" alt="City by night" /></li>
						<li><img src="images/6.jpg" alt="Tour Eiffel la nuit" /></li>
					</ul>
				</div>

			</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: grid;
}

li
{
  list-style: none;
  grid-row-start: 1;
  grid-column-start: 1;
}

li:not(:first-of-type)
{
  display: none;
}


#carrousel img
{
  height: 300px;
  width: 700px;
  display: block;
}

img
{
  max-width: 100%;
}


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

JavaScript:

"use strict";   // Mode strict du JavaScript

/*************************************************************************************************/
/* ****************************************** DONNEES ****************************************** */
/*************************************************************************************************/


/*************************************************************************************************/
/* ***************************************** FONCTIONS ***************************************** */
/*************************************************************************************************/
function onSliderToggle(index)
{
  setInterval( function()
  {
    ++index;

    $("li").each( function()
    {
      $("li:nth-of-type(" + index + ")").fadeIn(5000);
    } );
  }, 5000 );
}

/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
jQuery(document).ready(function($)
{
    onSliderToggle(1);
});

Si quelqu'un a une idée d'amélioration, ça m'intéresse.

Merci à vous tous.

Je viens de m'apercevoir que quand j'arrive à la dernière slide, ça ne revient pas à la première, du coup j'ai fait une condition :

function onSliderToggle(index)
{
  setInterval( function()
  {
    ++index;

     $("li").each( function()
    {
      $("li:nth-of-type(" + index + ")").fadeIn(5000);
    } );
  }, 5000 );

  if ( index > $("li").length)
  {
    index = 0;
  }
}

mais le carrousel ne tourne pas en boucle, bien que le paramètre index a bien été réinitialisé à zéro. Je comprend d'où vient le problème, la méthode each de jquery parcourt les li un à un, et s'arrête quand il n y en a plus. Donc, même si index est redéfini à zéro, each ne l'est pas. Comment faire pour que each recommence à parcourir les li à partir de zéro quand on rentre dans le if ?

Merci pour votre aide.

-
Edité par me_moi 19 avril 2018 à 15:14:09

me_moi

20 avril 2018 à 15:32:40

"use strict";   // Mode strict du JavaScript

/*************************************************************************************************/
/* ****************************************** DONNEES ****************************************** */
/*************************************************************************************************/


/*************************************************************************************************/
/* ***************************************** FONCTIONS ***************************************** */
/*************************************************************************************************/
var Slideshow = {
  $slideshow: $("#slideshow"),
  $slides: $("#slideshow img"),
  index: 1,

  onSlideshowGoToNext: function()
  {
    this.index++;

    this.refreshSlideshow();

    if (this.index === this.$slides.length)
    {
      this.index = 0;
    }
  },
  onSlideshowGoToPrevious: function()
  {
    this.index--;

    if (this.index < 1)
    {
      this.index = this.$slides.length;
    }

    this.refreshSlideshow();
  },
  onSlideshowToggle: function()
  {
    setInterval( function() { Slideshow.onSlideshowGoToNext(); }, 5000 );
  },
  refreshSlideshow: function()
  {
    $("li:nth-of-type(" + this.index + ")").fadeIn(5000);
    $("li").not(":nth-of-type(" + this.index + ")").fadeOut(5000);
  }
};

/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
jQuery(document).ready(function($)
{
    Slideshow.$slideshow.after(
      '<button id="slideshow-previous"><i class="fa fa-backward"></i></button>' +
      '<button id="slideshow-toggle"><i class="fas fa-play"></i></button>' +
      '<button id="slideshow-next"><i class="fa fa-forward"></i></button>'
    );

    $("#slideshow-next").on("click", function() { Slideshow.onSlideshowGoToNext(); });
    $("#slideshow-toggle").on("click", function() { Slideshow.onSlideshowToggle(); });
    $("#slideshow-previous").on("click", function() { Slideshow.onSlideshowGoToPrevious(); });
});