Jump to content
Marxrj

Fazer imagens aleatórias em DIV

Recommended Posts

Galera, tenho um carrossel no meu arquivo, porém queria que elas mudassem aleatóriamente a cada refresh na página, pois ela s´fica pela ordem normal.

      <div>
        <div>
          <div class="loop owl-carousel owl-theme">
            <div>
              <img src="imagens/jpeg.01">
            </div>
			
            <div>
              <img src="imagens/jpeg.02">
            </div>
			
            <div>
              <img src="imagens/jpeg.03">
            </div>
			
            <div>
              <img src="imagens/jpeg.01">
            </div>
			
            <div>
             <img src="imagens/jpeg.05"> 
            </div>
			
            <div>
              <img src="imagens/jpeg.07"> 
            </div>
			
			<div>
              <img src="imagens/jpeg.07">
            </div>
          </div>

 

Share this post


Link to post
Share on other sites

Esse exemplo que mostrei já está em um carrossel, mas não fica aleatório. Precisava de um exemplo.

Share this post


Link to post
Share on other sites

Tenta trocar o seu script por isso:

 

jQuery(document).ready(function($) {
  buildShuffleFeature();

  $(".owl-carousel .item").shuffle();

  $('.owl-carousel').owlCarousel({
    center: true,
    items: 1,
    loop: true,
    margin: 2,
    autoplay: true,
    autoplayTimeout: 5000,
    responsive: {
      550: {
        items: 9
      }
    }
  });


  function buildShuffleFeature() {
    (function($){
      $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
              return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
              var random = getRandom(allElems.length),
                  randEl = $(allElems[random]).clone(true)[0];
              allElems.splice(random, 1);
              return randEl;
            });

        this.each(function(i){
          $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);
      };
    })(jQuery);
  }
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By RewelB
      Olá, gostaria de saber como faço pra que quando o usuário digite algo em um campo de texto a imagem fique girando. Eu tenho a imagem de uma engrenagem e queria que ela fizesse uma animaçãozinha no estilo da que tem nesse site: http://www.empsis.com.br/. Sou iniciante e peço desculpas se isso for muito simples de fazer. Estou usando PHP, HTML e CSS.
    • By JenneferBarbosa
      Pessoas, sou nova em PHP e queria que vocês me ajudassem com um exemplo. Tenho um array com um token e cada token possui um limite diário de 25 consultas. Então, eu criei 10 tokens para que as consultas sejam 250 consultas por dia. Porém, eu preciso verificar se cada token atingiu o limite de 25 e então partir para outra chave do array. Quando o limite de todos for batido, dizer para o usuário que ele atingiu o limite e que a nova consulta será feita no outro dia. Se alguém tiver como me ajudar com um exemplo. Ficarei muito feliz e grata! 
      $token = [ 'aaaaaaa' , 'bbbbbbb' , 'cccccc' , 'dddddd' , 'eeeeee' , 'fffffff' ];  
    • By drx
      Olá pessoal!
       
      Pergunta:  Dá para desenvolver qualquer tipo de sistema web com WordPress?
      Por exemplo: Quero desenvolver um sistema multinível. É tranquilo?
      Aguardo.
    • By RewelB
      Olá, gostaria de saber como faço pra que quando o usuário digite algo em um campo de texto a imagem fique girando. Eu tenho a imagem de uma engrenagem e queria que ela fizesse uma animaçãozinha no estilo da que tem nesse site: http://www.empsis.com.br/. Sou iniciante e peço desculpas se isso for muito simples de fazer. Estou usando PHP, HTML e CSS.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.