Owl 轮播不在屏幕上显示动态内容

Question

我正在使用 owl -carousel 用于网站推荐的动态内容显示。但是我无法在屏幕上显示 owl 滑块。我的意思是在设备滑块上构建应用程序后不显示，任何人都可以建议我我需要做什么以及我下面的代码有什么问题。请帮助我....谢谢。

<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>

Answer 1

试试这个：

$(document).ready(function () {
    AlhtestimonialFunction();
    
    function checkOwlcarousel() {
        setTimeout(function () {
            if ($('.owl-carousel .active').is(':visible')) {
                owlsliderfuction();
            } else {
                checkOwlcarousel();
            }
        }, 250);
    }
    checkOwlcarousel();
});

因为Javascript只在打开页面时生效一次，所以我们必须和运行滑块同步数据访问

Owl 轮播不在屏幕上显示动态内容

Owl carousel not showing Dynamic contents on screen

javascript

jquery

owl-carousel