owl-carousel 幻灯片插件 reinit/reload

前言:最近项目中有个需求,对一个幻灯片的区域内容进行替换,然后重新渲染;如果用owlCarousel直接去初始化的话会出现无法渲染成功的问题.(使用的版本是1.3.3)

下面就是实现的思路:

1.先查看的owlCarousel对jquery的扩展代码:

  $.fn.owlCarousel = function (options) {
        return this.each(function () {
            if ($(this).data("owl-init") === true) {
                return false;
            }
            $(this).data("owl-init", true);
            var carousel = Object.create(Carousel);
            carousel.init(options, this);
            $.data(this, "owlCarousel", carousel);
        });
    };

从代码中可以看出这个owlCarousel函数中,先实例化了一个Carousel类,并执行了其中的init方法,完成幻灯片的初始化,并往当前的选择的元素中用$.data()方法附加了一个"owl-init"的状态和owlCarousel实例的数据.

2.查看owlCarousel类:

...
reinit : function (newOptions) {
            var base = this,
                options = $.extend({}, base.userOptions, newOptions);
            base.unWrap();
            base.init(options, base.$elem);
        },
...

可以发现这个owlCarousel类有一个reinit,既然Carousel类的实例附加到指定的元素中,那么重新拿到这个Carousel类实例就可以调用这个reinit方法,实现将当前的元素的幻灯片内容重新渲染

3.外部代码实现

var shanghuiOwl;
        
        function shanghuiSlide(selector,firstLoad){

            var html = '//被替换的内容';

            $('#owl-demo').html(html);
            
            if(firstLoad){//如果是页面第一次打开的话直接调用owlCarousel实现初始化
                shanghuiOwl = $('#owl-demo').owlCarousel({
                    items: 1,
                    autoPlay: true,
                });
            }else{
                shanghuiOwl.data("owlCarousel").reinit({
                    items: 1,
                    autoPlay: true,
                });
            }
        }

5.实现效果

首次加载第一张图显示一张猫头鹰

WX20181119-085542@2x.png

点击切换之后第一张被换成一张粉色的图片

WX20181119-085708@2x.png

最后,这就是owlCarousel插件实现幻灯片内容更换后重新渲染的全部经过.(ps:查看源码有时可以有不一样的收获)