Created
January 26, 2016 04:08
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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