Skip to content

Instantly share code, notes, and snippets.

@dajocarter
Created January 26, 2016 04:08
Show Gist options
  • Save dajocarter/f6966c8534105d5112b5 to your computer and use it in GitHub Desktop.
Save dajocarter/f6966c8534105d5112b5 to your computer and use it in GitHub Desktop.
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; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment