Ordre aléatoire.

Fermé

Saafty Messages postés 37 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 1 décembre 2018 - 11 nov. 2017 à 19:12
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 11 nov. 2017 à 19:56

Bonjour à tous,

j'aimerai savoir si il est possible de faire apparaitre mes photos dans un ordre aléatoire. je m'explique, sur mon site internet j'ai une présentation de mon équipe qui ce forme en ligne avec des photos, j'en affiche trois sur ma page et je peux faire défilé pour voir les autres vers la droite. J'aimerai que ceux-ci soit aléatoire, pas que chaque fois que je viens sur le site ce soit toujours les trois premier que l'on voit, quelqu'une à t-il une idée de comment je peux faire? :)

Voici mon code pour vous donner une idée.

      <!-- team carousel -->
      <div id="team-carousel" class="owl-carousel">

      <div class="item col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
        <div class="team-thumb">
          <div class="image-holder">
            <img src="images/team-img1.jpg" class="img-responsive img-circle" alt="Mary">
          </div>
          <h2 class="heading">Anthony Lejoly</h2>
          <p class="description">Pilote</p>
        </div>
      </div>

      <div class="item col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="0.6s">
        <div class="team-thumb">
          <div class="image-holder">
            <img src="images/team-img2.jpg" class="img-responsive img-circle" alt="Jack">
          </div>
          <h2 class="heading">Adrien Dewalque</h2>
          <p class="description">Pilote</p>
        </div>
      </div>

      <div class="item col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="0.8s">
        <div class="team-thumb">
          <div class="image-holder">
            <img src="images/team-img3.jpg" class="img-responsive img-circle" alt="Linda">
          </div>
          <h2 class="heading">Emeric Langer</h2>
          <p class="description">Pilote</p>
        </div>
      </div>
      
      <div class="item col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="0.8s">
        <div class="team-thumb">
          <div class="image-holder">
            <img src="images/team-img4.jpg" class="img-responsive img-circle" alt="Sandy">
          </div>
          <h2 class="heading">Thomas Leufgen</h2>
          <p class="description">Pilote</p>
        </div>
      </div>


      </div>
      <!-- end team carousel -->

A voir également:

Ordre aléatoire.
Excel trier par ordre croissant chiffre - Guide
Triez ce tableau par ordre alphabétique des prénoms - Forum LibreOffice / OpenOffice
Classer les applications par ordre alphabétique iphone - Guide
Vlc lecture aléatoire - Forum Téléphones & tablettes Android
Tirage au sort excel aléatoire sans doublon ✓ - Forum Excel

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
11 nov. 2017 à 19:29

Bonjour,

Tu postes dans le forum PHP ... hors je ne vois aucune ligne de php dans le code que tu nous montres.....

Comment "génères" tu tes blocs de carousel (tes div) ?
Si tu les écrits en statique (en dur dans ton code....) il sera compliqué de faire de l'aléatoire.
Par contre... si tu les génères en PHP (et même depuis une base de données....) là ça sera simple.

Sinon, il reste possible en Javascript de faire quelque-chose...
un truc du genre (en jquery) :

var currentSlide;
var rand;
$(document).ready(function() {
  currentSlide = Math.floor((Math.random() * $('.item').length));
  rand = currentSlide;
  $('#team-carousel').carousel(currentSlide);
  $('#team-carousel').fadeIn(1000);
  setInterval(function(){ 
    while(rand == currentSlide){
      rand = Math.floor((Math.random() * $('.item').length));
    }
    currentSlide = rand;
    $('#team-carousel').carousel(rand);
  },3000);
});

Saafty Messages postés 37 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 1 décembre 2018
11 nov. 2017 à 19:53

Merci de votre réponse, ou devrais-je placer ce bout de code? Merci d'avance

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Saafty Messages postés 37 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 1 décembre 2018
11 nov. 2017 à 19:56

Dans l'idéal... dans des balises SCRIPT placé à la fin de ta page.

Discussions similaires

Ordres des amies snap

liste de noms par ordre alphabétique

tirage aléatoire sans doublon

Ordre des contacts actifs

comment mettre en ordre alphabétique

Discussions similaires

Newsletters