0

I am having trouble generating a loop for my post. The JS calls the slide_ID which then needs to display each slide-ID in numeric order for it to work. Example for slide-1 to scroll to its next slide the slide_ID needs to be slide-2 (this is being controlled by a next button).

The problem is not in the JS but within the loop. I need to populate each post so each post ID number is in numeric order.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
    <section id="<?php $x=1; do { echo "slide-$x"; $x++; } while ($x<=1); ?>" class="homeSlide">
        <div class="bcg" 
             data-center="background-position: 50% 0px;" 
             data-top-bottom="background-position: 50% -100px;" 
             data-anchor-target="#<?php $x=1; do { echo "slide-$x"; $x++; } while ($x<=1); ?>">
            <div class="hsContainer">
            <div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#<?php $x=1; do { echo "slide-$x"; $x++; } while ($x<=1); ?> h2">
                <h2>Fade out elements before<br />they leave viewport</h2>
                <p>This slide moves background image at a slower speed then the page scroll.</p>
            </div>
            </div>
        </div>
    </section>
<?php endwhile; endif; ?>

The loop I am using to display the slide ID number is

$x=1; do { echo "slide-$x"; $x++; } while ($x<=1);

However, I can not seem to figure out how to change the number automatically when a new post has been submitted.

Any help would be great.

0

"The Loop" is already a loop, so I don't see the need for your second loop. In fact, the secondary while loop shouldn't work because you keep resetting it to 1 for every post. You also have some PHP syntax issues like $echo (that's a variable) instead of echo and the way you concatenate the number variable with the "slide-" string.

The following [untested snippet] should do what you want:

<?php if (have_posts()) : 
  /* set $slide_id to "1" for first slide */
  $slide_id = 1;
  while (have_posts()) : the_post(); ?>
    <section id="<?php echo "slide-" . $slide_id; /* output "slide-{x}" */ ?>" class="homeSlide">
      <div class="bcg" 
        data-center="background-position: 50% 0px;" 
        data-top-bottom="background-position: 50% -100px;" 
        data-anchor-target="#<?php echo "slide-" . $slide_id; /* output "slide-{x}" */ ?>">
      <div class="hsContainer">
      <div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#<?php echo "slide-" . $slide_id; // output "slide-{x}" ?> h2">
        <h2>Fade out elements before<br />they leave viewport</h2>
        <p>This slide moves background image at a slower speed then the page scroll.</p>
      </div>
      </div>
    </div>
    </section>
    <?php $slide_id++; /* increment $slide_id */?>
<?php endwhile; endif; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.