[Résolu] Récupération d'un attribut data

Salut à tous,

Je suis entrain de réaliser un système de slide pour afficher alternativement des tableaux HTML.

A ce stade, les slides sont affichées à l'écran pour une durées de 5 secondes.
Ceux que je souhaiterai c'est de pouvoir définir la durée de chacune de mes slides à l'aide d'un attribut data (data-duration="XXXX").

Je me doute que cela ne doit pas être très complexe mais je n'ai pas réussi à obtenir un résultat satisfaisant. Et les heures commencent à compter

Merci.
Maël

Mon code HTML (simplifié) :

<main class="main">
      <table class="slide" data-duration="2000">...</table>
      <table class="slide" data-duration="6000">...</table>
      <table class="slide" data-duration="4000">...</table>
      <table class="slide" data-duration="9000">...</table>
</main>

Et mon script :

$(function() {
	$('.main table').hide();
	$('.main table:first-child').show();

	setInterval(function() {

		var $x = $('.main table:first-child').fadeOut(500, function() {
				$(this).appendTo('.main')
			})
			.next('table').fadeIn(500);
	}, 5000);
});

Bonjour,

Quelle durée pour le fade-in et le fade-out ? 10% de ce qu'il y a dans le data-duration? Ou bien c'est toujours 500 ?

Amicalement,
Modifié par parsimonhi (20 Feb 2022 - 12:01)

parsimonhi a écrit :
Bonjour,

Quelle durée pour le fade-in et le fade-out ? 10% de ce qu'il y a dans le data-duration? Ou bien c'est toujours 500 ?

Amicalement,

La durée sera effectivement toujours de 500 pour le fade-in et fade-out.

parsimonhi a écrit :
Bonjour,

On peut, au lieu d'utiliser setInterval(), utiliser setTimeout() qui ne s'exécute qu'une fois. Et dans la fonction exécutée par setTimeout(), on relance un nouveau setTimeout() avec le nouveau temps qu'on récupère dans l'attribut data-duration.

Exemple :

$(function() {
  $('.main table').hide();
  $('.main table:first-child').show();

  function f() {
    var $x = $('.main table:first-child').fadeOut(500, function() {
      $(this).appendTo('.main');
    }).next('table').fadeIn(500, function() {
      setTimeout(f, $('.main table:first-child').attr('data-duration'))
    });
  }
  setTimeout(f, $('.main table:first-child').attr('data-duration'));
});

Amicalement,

Je n'avais pas pensé à ça, mais c'est logique !
Cela fonctionne, merci beaucoup

Maël

Bonjour,

J'ai remplacé un '.main table:first-child' par this dans mon code initial. C'est un poil mieux, mais c'est du détail.

Amicalement,