前言:最近项目中有个需求,对一个幻灯片的区域内容进行替换,然后重新渲染;如果用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:查看源码有时可以有不一样的收获)
