Valentin Verdegales Valentin Verdegales - 3 months ago 9
Javascript Question

Making a Slideshow in Wordpress using the Advanced Custom fields plugin and the repeater field

I am making my first steps learning to code. I made some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.

The thing is that I want to make an slideshow and I found this cool and simple one in w3schools http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self.

It's nice! But there are some problems if I want to implement it in Wordpress.

I made 10 image fields. Each one is one is a space to put one picture of my Slideshow. The code would be something like this:

<?php get_header(); ?>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

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



<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>


<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>


</div><!-- .content-area -->

<?php get_footer(); ?>


This has a problem: I have always to upload 10 images because if I upload less than 10 images I would have empty custom fields that would be showed as blank spaces.

Because of this problem I decided to make a repeater field. So I can create how many image subfields as I want without having this empty fields problem.

So the code would be something like this:

<?php

// check if the repeater field has rows of data
if( have_rows('image') ):

// loop through the rows of data
while ( have_rows('image') ) : the_row();

// display a sub field value
the_sub_field('subimage');

endwhile;

else :

// no rows found

endif;

?>


But now the question is: How can I do to apply an html class to my subfield? like this I can make the slideshow.

I tryied this but it doesn't work:

<?php

// check if the repeater field has rows of data
if( have_rows('image') ):

// loop through the rows of data
while ( have_rows('image') ) : the_row();

// display a sub field value
<div class="mySlides"> the_sub_field('subimage');</div>

endwhile;

else :

// no rows found

endif;

?>


Do you have some suggestion?

Answer

First of all, don't use the_sub_field() here. the_sub_field() echoes the field. Instead of this, use get_sub_field. It retrieves the value without outputting it. your code should look like this:

    // check if the repeater field has rows of data
    if( have_rows('image') ):

      // loop through the rows of data
        while ( have_rows('image') ) : the_row();

          if( get_sub_field('subimage') ) :
            // display a sub field value
            echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
          endif;

        endwhile;

    endif;

Note the if( get_sub_field('subimage') ) : statement to check if there is really a value within the repeater field. If yes, it echoes strings chained with your get_sub_field('subimage') function.

Take a look here to advanced examples.

Comments