Automatically create a loop for post ID

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

Related Posts: