问题描述
我正在使用owl -carousel进行网站推荐的动态内容显示。但是我无法在屏幕上显示猫头鹰滑块。我的意思是在设备滑块上构建应用程序后未显示，任何人都可以建议我需要做的事情以及以下代码中的错误之处。请帮助我...。谢谢。
<style>
#home-testimonial-section {
background-color: #FFFFFF !important;
}
.grabbable {
cursor: col-resize;
/* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.testimonial {
background: #0000000a;
padding: 20px;
position: relative;
}
.testimonial .title {
font-size: 20px;
font-weight: 500;
color: #333;
text-transform: uppercase;
margin-top: 0;
}
.testimonial .description {
font-size: 16px;
color: #000;
line-height: 30px;
padding: 10px;
min-height: 250px;
}
.testimonial_content {
position: relative;
padding: 20px 34px;
}
.testimonial .pic {
display: inline-block;
overflow: hidden;
padding-left: 20px;
}
.testimonial .pic img {
height: 50px;
width: auto;
position: inherit;
bottom: 0;
}
.testimonial .name {
font-size: 16px;
font-weight: 600;
margin-right: 45px;
float: right;
text-transform: capitalize;
}
.testimonial .post {
font-size: 12px;
color: rgb(175,170,170);
line-height: 24px;
}
.testimonial .ratingspn {
font-size: 14px;
line-height: 24px;
}
.testimonial .rating {
padding: 0;
margin: 0;
list-style: none;
float: right;
}
.testimonial .rating li {
display: inline-block;
color: #ffc207;
}
.owl-theme .owl-controls {
margin-top: 20px;
}
.owl-theme .owl-controls .owl-page span {
background: #000000;
}
@media only screen and (max-width: 760px) {
.testimonial_content {
padding-left: 20px;
}
}
@media only screen and (max-width: 480px) {
.testimonial .rating {
padding: 0;
}
.testimonial .rating li {
display: inline;
}
}
</style>
<script type="text/javascript">
function owlsliderfuction() {
$("#testimonial-slider").owlCarousel({
items: 3,loop: true,margin: 10,autoplay: true,autoplayTimeout: 1000,autoplayHoverPause: true,responsive: {
0: {
items: 1,},600: {
items: 2,1000: {
items: 3,}
}
});
}
function AlhtestimonialFunction() {
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange",function() {
if (this.readyState === 4) {
//console.log(this.responseText);
var reviewdatatext = this.responseText;
console.log(reviewdatatext);
// Converting JSON object to JS object
var obj = JSON.parse(reviewdatatext);
// Converting JSON object to JS object
console.log(obj);
var reviewarray = obj.content;
console.log(reviewarray);
var arrlength = reviewarray.length;
if (arrlength >= 1) {
var testimonialBolck1 = '<div class="demo">' +
'<div class="sqs-block-content"> <h1 style="text-align:center;white-space:pre-wrap;"> What Our Customers Say</h1></div>' +
'<br>' +
'<br>' +
'<div class="grabbable">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div id="testimonial-slider" class="owl-carousel owl-theme">';
var testimonialBolckvrr = '';
for (i = 0; i < arrlength; i++) {
// convert unix timestamp to milliseconds
var timestampi = reviewarray[i].dateCollected
var ts_msi = timestampi * 1000
// initialize new Date object
var date_obi = new Date(ts_msi)
// year as 4 digits (YYYY)
var yeari = date_obi.getFullYear()
// month as 2 digits (MM)
var monthi = ("0" + (date_obi.getMonth() + 1)).slice(-2)
// date as 2 digits (DD)
var datei = ("0" + date_obi.getDate()).slice(-2)
var original_datei = datei + "/" + monthi + "/" + yeari;
var testimonialBolckia = '<div id="testimonial" class="testimonial">' +
'<div class="testimonial_content">' +
'<span class="post">' + original_datei + '</span>' +
'<span class="ratingspn"></span>' +
'<ul class="rating">';
var rating = reviewarray[i].rating;
if (rating === 5) {
var testimonialBolckib = '<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>';
} else if (rating === 4.75 || rating === 4.5 || rating === 4.25) {
var testimonialBolckib = '<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star-half"></li>';
} else {
var testimonialBolckib = '<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>' +
'<li class="fa fa-star"></li>';
}
var testimonialBolckic = '</ul>' +
'</div>' +
'<p class="description">' + reviewarray[i].body + '</p>' +
'<h3 class="name">' + reviewarray[i].author + '</h3>' +
'<div class="testimonial-content">' +
'<div class="pic">' +
'<img src="https://alh-res.cloudinary.com/image/upload/v1583886927/Development%20demo/logo-TheFork-vertical-green-background.png" alt="">' +
'</div>' +
'</div>' +
'</div>';
var testimonialBolcki = testimonialBolckia + testimonialBolckib + testimonialBolckic;
testimonialBolckvrr = testimonialBolckvrr + testimonialBolcki;
console.log(testimonialBolckvrr);
}
var testimonialBolck3 = '</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var testimonialBolck = testimonialBolck1 + testimonialBolckvrr;
document.getElementById("reviews").innerHTML = testimonialBolck;
} else {
document.getElementById("reviews").style.display = "none";
}
}
});
xhr.open("GET","https://revinate-endpoint-url.herokuapp.com/reviews/136522/");
xhr.send();
}
$(document).ready(function() {
owlsliderfuction();
AlhtestimonialFunction();
});
</script>
<!-- div to display the owl slider -->
<div id="reviews"></div>
解决方法
尝试一下：
$(document).ready(function () {
AlhtestimonialFunction();
function checkOwlcarousel() {
setTimeout(function () {
if ($('.owl-carousel .active').is(':visible')) {
owlsliderfuction();
} else {
checkOwlcarousel();
}
},250);
}
checkOwlcarousel();
});
由于Javascript在打开页面时只能运行一次，因此我们必须与运行滑块同步数据访问