问题
Is there a way in Owl Carousel 2 make a king random function. I need the slides on the page to load randomly.
Before in the older Owl Carousel version I did it this way:
$(document).ready(function () {
//Sort random function
function random(owlSelector) {
owlSelector.children().sort(function () {
return Math.round(Math.random()) - 0.5;
}).each(function () {
$(this).appendTo(owlSelector);
});
}
$(".feedback").owlCarousel({
autoPlay: 5000,
slideSpeed: 200,
items: 1,
itemsDesktop: [1199, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
autoHeight: true,
//Call beforeInit callback, elem parameter point to $(".feedback")
beforeInit: function (elem) {
random(elem);
}
});
});
How can this be done in the best way in Owl Carousel 2?
回答1:
You have to use the new onInitialize
callback, like this:
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);
});
},
});
Find more information in the 2.x docs.
回答2:
For some reason, AdmireNL's answer was giving me problems for iOS devices but worked perfectly for everything else. No idea why that would be, but I solved my issue by using the top answer listed here: How to randomly sort list items?
My final code:
$.fn.randomize = function(selector){
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function(){
$(this).children(selector).sort(function(){
return Math.round(Math.random()) - 0.5;
}).detach().appendTo(this);
});
return this;
};
var slider = $('#slider');
slider.owlCarousel({
onInitialize : function(){
$(slider).randomize();
}
});
来源:https://stackoverflow.com/questions/28283603/owl-carousel-2-random-function