前言:最近項目中有個需求,對一個幻燈片的區(qū)域內(nèi)容進行替換,然后重新渲染;如果用owlCarousel直接去初始化的話會出現(xiàn)無法渲染成功的問題.(使用的版本是1.3.3)

下面就是實現(xiàn)的思路:

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函數(shù)中,先實例化了一個Carousel類,并執(zhí)行了其中的init方法,完成幻燈片的初始化,并往當(dāng)前的選擇的元素中用$.data()方法附加了一個"owl-init"的狀態(tài)和owlCarousel實例的數(shù)據(jù).

2.查看owlCarousel類:

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

可以發(fā)現(xiàn)這個owlCarousel類有一個reinit,既然Carousel類的實例附加到指定的元素中,那么重新拿到這個Carousel類實例就可以調(diào)用這個reinit方法,實現(xiàn)將當(dāng)前的元素的幻燈片內(nèi)容重新渲染

3.外部代碼實現(xiàn)

var shanghuiOwl;
        
        function shanghuiSlide(selector,firstLoad){

            var html = '//被替換的內(nèi)容';

            $('#owl-demo').html(html);
            
            if(firstLoad){//如果是頁面第一次打開的話直接調(diào)用owlCarousel實現(xiàn)初始化
                shanghuiOwl = $('#owl-demo').owlCarousel({
                    items: 1,
                    autoPlay: true,
                });
            }else{
                shanghuiOwl.data("owlCarousel").reinit({
                    items: 1,
                    autoPlay: true,
                });
            }
        }

5.實現(xiàn)效果

首次加載第一張圖顯示一張貓頭鷹

WX20181119-085542@2x.png

點擊切換之后第一張被換成一張粉色的圖片

WX20181119-085708@2x.png

最后,這就是owlCarousel插件實現(xiàn)幻燈片內(nèi)容更換后重新渲染的全部經(jīng)過.(ps:查看源碼有時可以有不一樣的收獲)