dajocarter
1/26/2016 - 4:08 AM

Example of using a slider with Glide.js and Scratch Theme for Wordpress + ACF

Example of using a slider with Glide.js and Scratch Theme for Wordpress + ACF

<?php if(have_rows('slides')): ?>
  <div id="Glide" class="glide clearfix">

    <div class="glide__arrows">
      <!-- 
        Options for arrow classes are: ion-chevron-left/right, ion-ios-arrow-left/right, ion-ios-arrow-back/forward.
        Can also substitute <i></i> with text, e.g., Previous and Next.
      -->
      <button class="glide__arrow prev" data-glide-dir="<"><i class="ion ion-chevron-left"></i></button>
      <button class="glide__arrow next" data-glide-dir=">"><i class="ion ion-chevron-right"></i></button>
    </div>

    <div class="glide__wrapper">
      <ul class="glide__track">
        <?php while(have_rows('slides')): the_row(); ?>
          <li class="glide__slide" style="background-image: url('<?php the_sub_field('slide_bg'); ?>');">
            <div class="center valign-always">
              <!-- Slide Text or Content -->
            </div>
          </li>
        <?php endwhile; ?>
      </ul>
    </div>
    
    <div class="glide__bullets"></div>

  </div>
<?php endif; ?>