Fórum Fazer imagens aleatórias em DIV #603126

20/06/2019

0

HTML PHP HTML5

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>
Marcelo

Marcelo

Responder

Posts

21/06/2019

Bruno Pardim

Você pode fazer em js uma função para gerar essas div dinamicamente dentro da div principal.
Responder

Gostei + 0

21/06/2019

Marcelo

Você pode fazer em js uma função para gerar essas div dinamicamente dentro da div principal.


Sim, isso eu sei, mas me dê um exemplo?
Responder

Gostei + 0

22/06/2019

Julio

Seria algo mais ou menos assim:
var owl = $('.owl-carousel');
owl.owlCarousel({
    onInitialize : function(element){
        owl.children().sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).each(function(){
            $(this).appendTo(owl);
        });
    },
});

fonte: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html
Responder

Gostei + 0

22/06/2019

Marcelo

Seria algo mais ou menos assim:
var owl = $('.owl-carousel');
owl.owlCarousel({
    onInitialize : function(element){
        owl.children().sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).each(function(){
            $(this).appendTo(owl);
        });
    },
});

fonte: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html


Este exemplo funcionou em termos. Quando o coloco muda as posições, mas as imagens ficam gigantes e o carrossel para de girar automaticamente. Estranho, e vi que o problema parecer estar neste - 0.5. Pois se o remover ele volta ao normal de antes, se mudar para positivo ele fica tudo gigante e não alterna mais, e se deixar no negativo qualquer valor, volta a ficar gigante e não girar sozinho
Responder

Gostei + 0

23/06/2019

Julio

@Marcelo Você está utilizando o plugin Owl Carousel da maneira correta? Importou os Scripts da lib e os css?
Responder

Gostei + 0

23/06/2019

Marcelo

@Marcelo Você está utilizando o plugin Owl Carousel da maneira correta? Importou os Scripts da lib e os css?

Fiz tudo correto, tudo funciona perfeitamente. Só fazer o carrossel ficar randômico é que não estou conseguindo
Responder

Gostei + 0

24/06/2019

Marcelo

Aqui coloquei o link com a pasta, só abrir o html. Já está prontinho. Quem puder ver e dar uma bola agradeço.

https://mega.nz/#!GnA10Qaa!nhVyRS4Y7gYU5wd8pb7NGy89C3fon1g8OelBuz6Ccdo
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar