How do I change the functionality of an image slider which is part of ACF?
I have an image slider on a page which was created as a Custom Field. The field type is called “Repeater”, and each image automatically slides to the next. All I want to do is remove that automation and let the user click through the images themselves. I am not experienced with PHP, but I have some JavaScript knowledge. I’ll include some code in the theme editor which looks related to the slider.
<div id="home-slider" class="home-page-slider swiper-container">
<div class="swiper-wrapper">
<?php if( have_rows('home_slider') ): ?>
<?php while( have_rows('home_slider') ): the_row();
// vars
$home_slider_image = get_sub_field('home_slider_image');
$home_slider_text = get_sub_field('home_slider_text');
$home_slider_link = get_sub_field('home_slider_link');
$home_slider_text_background_color = get_sub_field('home_slider_text_background_color');
?>
<div class="swiper-slide">
<?php if( $home_slider_link ): ?>
<a href="<?php echo $home_slider_link; ?>">
<?php endif; ?>
<img src="<?php echo $home_slider_image; ?>" />
<div class="h1-wrap">
<h1><?php echo $home_slider_text; ?></h1>
</div>
<?php if( $home_slider_link ): ?>
</a>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
I’m out of my depth here and wish I could post the most relevant code or be hyper specific about the problem, so please inform me on if I can help find more pertinent information to help here.
Leave an answer