Owl Carousel 2 随机功能答案

【问题标题】：Owl Carousel 2 random functionOwl Carousel 2 随机功能
【发布时间】：2015-04-01 17:53:03
【问题描述】：

Owl Carousel 2 中有没有办法让国王随机函数。我需要页面上的幻灯片随机加载。

在旧的 Owl Carousel 版本中，我是这样做的：

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

如何在 Owl Carousel 2 中以最佳方式做到这一点？

【问题讨论】：

标签： javascript jquery carousel owl-carousel

【解决方案1】：

你必须使用新的onInitialize 回调，像这样：

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

在2.x docs 中查找更多信息。

【讨论】：

如何添加我的设置？

【解决方案2】：

出于某种原因，AdmireNL 的回答在 iOS 设备上给我带来了问题，但在其他所有设备上都运行良好。不知道为什么会这样，但我使用此处列出的最佳答案解决了我的问题：How to randomly sort list items?

我的最终代码：

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

【讨论】：