关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果)

本文主要是介绍关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

维护公司老项目,发现问题,记录一下~ 

1.产生原因

owl 已经实例已经存在,在ajax请求成功后并更改完页面数据后, 但是没有销毁之前实例,并重新生成新的实例,导致没有owl插件没有轮播效果.

2.解决方案

html:

<div class="owl-slider ps-carousel" data-owl-auto="true" data-owl-loop="true" data-owl-speed="7500" data-owl-gap="30"data-owl-nav="true" data-owl-item="3" data-owl-item-xs="1" data-owl-item-sm="2" data-owl-item-md="3"data-owl-item-lg="3" data-owl-duration="1000" data-owl-mousedrag="false" id="carousel-featured-properties"><div class="ps-project ps-project--grid"><div class="ps-project__thumbnail"><div class="ps-project__image"><img src="../img/property/1.jpg" alt="" id="img0" /></div><aclass="ps-project__overlay" id="detail0"></a><div class="ps-project__actions"><a href="javascript:void(0)" style="float: right"><iclass="lnil lnil-star-fill active"></i></a></div></div><div class="ps-project__content"><h4 class="ps-project__name"><a id="name0">房屋名称111</a></h4><p class="ps-project__address" id="address0">上海市,闵行区,浦秀路</p><p class="ps-project__price"><strong id="price0">¥2,0000/月</strong></p><div class="ps-project__meta"><figure><figcaption>房产经济人</figcaption><p id="agent0">张三</p></figure><figure><figcaption>状态</figcaption><p id="state0">出售</p></figure><figure><figcaption>时间</figcaption><p id="build0">7/4/2021</p></figure></div><div class="ps-project__services"><p><span id="arce0"><i class="lnil lnil-size"></i>250 ㎡</span></p><p><span id="bedroom0"><i class="lnil lnil-hospital-bed"></i>3 卧室</span></p><p><span id="bathroom0"><i class="icon icon-bathtub"></i>2 浴室</span></p></div></div></div><div class="ps-project ps-project--grid">//第二个</div><div class="ps-project ps-project--grid">//第三个</div><div class="ps-project ps-project--grid">//第四个</div></div>

js:

success: function (result) {
// alert("查找成功");
//console.log(result)
var allHouse = result.data;
$("#carousel-featured-properties").trigger("destroy.owl.carousel")
$("#carousel-featured-properties").html("");// $("#testId").html('<div class="owl-slider ps-carousel" data-owl-auto="true" data-owl-loop="true"data-owl-speed="7500" data-owl-gap="30" data-owl-nav="true" data-owl-item="4" data-owl-item-xs="1"data-owl-item-sm="2" data-owl-item-md="3" data-owl-item-lg="3" data-owl-duration="1000" data-owl-mousedrag="false"id="carousel-featured-properties"></div>');
$(allHouse).each(function (index,house1){
var house = house1.bHouse;
var image = house1.image;
var agents = house1.agents;// 第二种写法,但是无轮播效果
var div = ' <div class="ps-project ps-project--grid">\n' +' <div class="ps-project__thumbnail">\n' +' <div class="ps-project__image"><img src="'+image[0].imageUrl+'" alt="" id="img0" /></div><aclass="ps-project__overlay" id="detail0"></a>\n' +' <div class="ps-project__actions"><a href="javascript:void(0)" style="float: right"><iclass="lnil lnil-star-fill active"></i></a></div>\n' +' </div>\n' +' <div class="ps-project__content">\n' +' <h4 class="ps-project__name"><a id="name0">'+house.houseName+'</a></h4>\n' +' <p class="ps-project__address" id="address0">'+house.address+'</p>\n' +' </p>\n' +' <div class="ps-project__meta">\n' +' <figure>\n' +' <figcaption>房产经济人</figcaption>\n' +' <p id="agent0">'+agents.name+'</p>\n' +' </figure>\n' +' <figure>\n' +' <figcaption>状态</figcaption>\n' +' <p id="state0">'+house.state+'</p>\n' +' </figure>\n' +' <figure>\n' +' <figcaption>时间</figcaption>\n' +' <p id="build0">'+house.buildTime+'</p>\n' +' </figure>\n' +' </div>\n' +' <div class="ps-project__services">\n' +' <p><span id="arce0"><i class="lnil lnil-size"></i>'+house.area+' ㎡</span></p>\n' +' <p><span id="bedroom0"><i class="lnil lnil-hospital-bed"></i>'+house.bedroom+' 卧室</span></p>\n' +' <p><span id="bathroom0"><i class="icon icon-bathtub"></i>'+house.bathroom+' 浴室</span></p>\n' +' </div>\n' +' </div>\n' +' </div>';$(".owl-slider").append(div);});$(".owl-slider").owlCarousel({
items: 3
});},
error: function (){
alert("查询失败");
}
重点:

 先销毁实例 再插入数据 再生成实例

//销毁实例代码
$("#carousel-featured-properties").trigger("destroy.owl.carousel")
//生成实例代码
$(".owl-slider").owlCarousel({});

这篇关于关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/208058

相关文章

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA