Ordre aléatoire.

Saafty Messages postés 37 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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 -->

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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);
});


0
Saafty Messages postés 37 Date d'inscription   Statut Membre Dernière intervention  
 
Merci de votre réponse, ou devrais-je placer ce bout de code? Merci d'avance
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Saafty Messages postés 37 Date d'inscription   Statut Membre Dernière intervention  
 
Dans l'idéal... dans des balises SCRIPT placé à la fin de ta page.
0

Discussions similaires

Pourquoi les touches du clavier sont-elles dans cet ordre-là ?
louloute47 -
Utilisateur anonyme -

6 réponses
Problème de définition d'ordre de boot
Alisko -
venus.rachel1 -

3 réponses
Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
Ordres des amies snap
Osmos27 -
Louana -

5 réponses
tirage aléatoire sans doublon
missfraise02 -
sc -

14 réponses