Блог

Я использую owl -carousel для динамического отображения содержимого для отзыва на веб-сайте. Но я не могу отобразить owl slider на экране. Я имею в виду, что после создания приложения на устройстве слайдер не отображается, кто-нибудь может подсказать мне, что мне нужно сделать и что не так в моем приведенном ниже коде. Пожалуйста, помогите мне….Спасибо.

 <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 demo/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 работает только один раз при открытии страницы, мы должны синхронизировать доступ к данным с запуском слайдера