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

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

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