how can i show picture and video in slider properly in HTML?
Viewed 2 times
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">×</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 !