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

×

Important Information

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