Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>Esse exemplo que mostrei já está em um carrossel, mas não fica aleatório. Precisava de um exemplo.
Como eu te disse, existe mais de uma maneira de fazer. Você precisa definir como será feito antes. Eu faria com Javascript.
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
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);
}
});
Existe mais de uma maneira de fazer isso. Você pode montar o carrossel com Javascript ou com uma linguagem no servidor (php por exemplo) e sortear a ordem.