在Wordpress中制作JavaScript幻灯片

Question

I am making my first steps learning to code. I made some courses on Internet about css, html, php, javascript and MySql. And now I decide to continue learning from the experience while I build a Wordpress child theme.

The thing is that I`m making an image slider from this example of W3schools http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self . It's an amazing example but now I have some problems to use it in Wordpress.

In the example they propose 4 images like this:

<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">

In Wordpress I have a post type with 10 fields for the images. It's something like this:

<div class="mySlides"><?php the_field("image"); ?></div>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<div class="mySlides"><?php the_field("image_4"); ?></div>
<div class="mySlides"><?php the_field("image_5"); ?></div>
<div class="mySlides"><?php the_field("image_6"); ?></div>
<div class="mySlides"><?php the_field("image_7"); ?></div>
<div class="mySlides"><?php the_field("image_8"); ?></div>
<div class="mySlides"><?php the_field("image_9"); ?></div>
<div class="mySlides"><?php the_field("image_10"); ?></div>

Using this system, my problem is that I'm obliged to upload 10 images min each time I want to make a post.

If I upload 7 images for example, it will have 3 empty spaces because I have 10 fields. So what I would see in my navigation would be:

image_1 > image_2 > image_3 > image_4 > image_5 > image_6 > image_7 > image_8 (blank space) > image_9 (blank space) > image_10 (blank space) > image_1

Is there a way to only see those fields that contain an image? Like this I'm not obliged to upload 10 images each time. Because I have a post type so I will not have 10 images each time I want to make a post.

Do you have some recomendation?

Answer 1

You just need to check if it returns a value:

<?php if(get_field("image") != ""): ?>
        <div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>

But as mentioned in the comments a repeater/gallery control might be a better option.