How do I change the functionality of an image slider which is part of ACF?

Question

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.

0
, , Taylor Dean 3 years 2020-04-06T20:50:55-05:00 0 Answers 84 views 0

Leave an answer

Browse
Browse