Owl Carousel 2 random function

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?

Answers:

Answer

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.

Answer

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();
    }
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.