Making a Javascript slideshow with wordpress

Question

I'm making my first steps learning to code. I made some courses about html, css, javascript, php and MySql, and now, I decided to continue learning from the practice while I build a Wordpress child theme.

The thing is that I am building an image slideshow. And to start understanding how to make it I found this: http://www.w3schools.com/w3css/w3css_slideshow.asp.

It's a simple and useful slideshow. It's really nice! But there are some problems if I want to implement it in Wordpress.

I made a post type and using the Advanced Custom Fields plugin I created a Repeater Field. So that code would be something like this in Wordpress:

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


<?php


if( have_rows('image') ):

    while ( have_rows('image') ) : the_row();


                if( get_sub_field('subimage') ) :

            echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
          endif;

    endwhile;


endif;

?>

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


</div>

<?php get_footer(); ?>

It works almost perfect! But now I have two problems:

1) Once I load my page to see the template. I see the first image overlaying the last image. I don't know why:

2) At the end of the slideshow there is an empty slide. It looks like I have an empty subfield but no, I don't have empty subfields. I don't know why there is an empty slide.

Do you have some recommendation?

Thank you

Adrian Lambertz · Accepted Answer · 2016-09-06 15:51:39Z

2

I think the problem is the last closing DIV </div> just before your get_footer(). It's a simple html markup error that causes the browser to fail. Your code should look like this:

<?php get_header(); ?>

<script>

var slideIndex = 1;

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>


<?php

if( have_rows('image') ):
  while ( have_rows('image') ) : the_row();
    if( get_sub_field('subimage') ) :
      echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
    endif;
  endwhile;
endif;

?>

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

<script>
  showDivs(slideIndex);
</script>

<?php get_footer(); ?>

Please let me know if this doesn't fix your problem.

edited Sep 6, 2016 at 15:51

answered Sep 6, 2016 at 15:19

Adrian Lambertz

9236 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gabriel Nazoa Over a year ago

Thank you Adrian! It solves the problem of the second slide. Now I'm trying to find why the problem with the overlaying slides continues. It's something that happens only when I reload the site. If I go to the next slide and then I go back again It doesn't happens.

Adrian Lambertz Over a year ago

I updated my answer, try this, it should work. I called the showDivs() function after the images because to call it before is too early. It fires before the html markup is loaded.

Gabriel Nazoa Over a year ago

I added showDivs(slideIndex); just below var slideIndex = 1; and the problem continues...Do you have some recommendation?

Adrian Lambertz Over a year ago

Look at my posted code. I took it right BEFORE the <?php get_footer(); ?> this shoukd fix your problem.

Gabriel Nazoa Over a year ago

It works perfectly! you are just amazing. Can you tell me why it works just before the footer and it doesn't work just before the header?

|

Collectives™ on Stack Overflow

Making a Javascript slideshow with wordpress

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related