Slider not visible in PHP but in HTML works - php

Question

I am making a shortcode of a slider that shows my WP featured posts and that has the possibility to open the details of each post through a hidden div. The slider is based on this one from w3schools (from which you can see the code and test online from this address: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
The problem is that the slider is only visible in php once I click the next arrow and from there it works correctly. I don't know why, since in HTML it works fine.
The error apppears: Cannot read property 'style' of undefined in
slides[slideIndex-1].style.display = "block";
My CSS:
#slider {
width: 70%;
margin: auto;
position: relative;
font-size: 15px;
}
.slide {display: none;}
My PHP:
<?php $query = new WP_Query( $args );
ob_start();?>
<div id="slider" class="slider">
<div class="arrows">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a></div>
<?php
while( $query->have_posts() ) :
$query->the_post();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post-
>ID), '');
$featuredID = get_post_thumbnail_id();?>
<div class="slide fade" id="slide">
<h2 class="zz-sc-jscss"><?php the_title(); ?></h2>
By <?php the_author(); ?> on <?php echo get_the_date( 'l, F d, Y' );
?>
<?php echo the_post_thumbnail();?>
<?php
echo "<div"; echo ' class="n"'; echo "id=".$featuredID.">";
$info = $featuredID;echo "</div>";
?> <div class="open">
<?php echo get_post_field('post_content', $post->ID);?>
<span class="cerrar">X</span></div></div>
<?php endwhile;
wp_reset_postdata();
return ob_get_clean();
}
My JS:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}

Answer 1

The problem seems to be in the "slider" div, it does not seem to be closed. Also try moving it after the slide generation loop.
<div id="slider" class="slider"></div> <--missing
<div class="arrows">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>