-
-
Save alinademi/df1c2d370aef34932f275efe5da3e7b2 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 hidden or 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