Skip to content

Instantly share code, notes, and snippets.

@jin0x
Forked from dajocarter/sliderExample.php
Created April 28, 2020 14:32
Show Gist options
  • Save jin0x/ce30eb85682252654937696f29d44db9 to your computer and use it in GitHub Desktop.
Save jin0x/ce30eb85682252654937696f29d44db9 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