how can i show picture and video in slider properly in HTML?

i just use w3 slider for my modal pop up But when my images or videos fetch from Api insteed of show in a container, it shows in block and Next / Previous button didn't work !

this is my modal that going to pop up when user click on a division:

            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <div id="parent">

                </div>
            </div>
        </div>

and this the Javascript:

$(".gallery").append(

                        '<div class="gallery-item" tabindex="0"><img id="' +
                        postId +
                        '" src="' +
                        image_url +
                        '" class="gallery-image" alt="">' +
                        post_type +
                        '<div class="gallery-item-info"><ul><li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> ' +
                        character.figures.likes_count.toLocaleString() +
                        '</li><li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> ' +
                        character.figures.comments_count.toLocaleString() +
                        "</li></ul></div></div>"

                    );

and this where slider located:

 //slider
                        var slideIndex = 1;
                        showSlides(slideIndex);

                        function plusSlides(n) {
                            showSlides(slideIndex += n);
                        }

                        function showSlides(n) {
                            var i;
                            var slides = document.getElementsByClassName("mySlides");
                            if (n > slides.length) {
                                slideIndex = 1
                            }
                            if (n < 1) {
                                slideIndex = slides.length
                            }
                            for (i = 0; i < slides.length; i++) {
                                slides[slideIndex - 1].style.display = "none";

                            }
                            slides[i].style.display = "none";


                        }

it suppose to be look like this : Slider by W3

but it look's like this : Slider by me

if you have any solution ill be thankful to help me out !