Fazer imagens aleatórias em DIV

HTML

PHP

HTML5

20/06/2019

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

Curtidas 0

Respostas

Bruno Pardim

Bruno Pardim

20/06/2019

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

Marcelo

20/06/2019

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?
GOSTEI 0
Julio

Julio

20/06/2019

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

Marcelo

20/06/2019

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
GOSTEI 0
Julio

Julio

20/06/2019

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

Marcelo

20/06/2019

@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
GOSTEI 0
Marcelo

Marcelo

20/06/2019

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
GOSTEI 0
POSTAR