SwiperJS and ACF Image Gallery Thumbnail Carousel

scripts-ahoy.php

<?php // <~ don't add me in

add_action( 'wp_enqueue_scripts', 'ls_scripts_styles', 20 );
/**
 * SwiperJS Scripts
 */
function ls_scripts_styles() {
	wp_enqueue_style( 'swipercssbundle', get_stylesheet_directory_uri() . '/css/swiper-bundle.min.css' , array(), '6.4.11', 'all' );
  	wp_enqueue_script( 'swiperjsbundle', get_stylesheet_directory_uri() . '/js/swiper-bundle.min.js', array(), '6.4.11', true );
  	wp_enqueue_script( 'swiperinit', get_stylesheet_directory_uri() . '/js/swiper-bundle-init.js', array( 'swiperjsbundle' ), '1.0.0', true );  

}

swiper-html.html

<!-- Swiper -->
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
      <!--loop images-->
      <div class="swiper-slide" style="background-image:url(./images/nature-10.jpg)"></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
      <!--loop images-->
      <div class="swiper-slide" style="background-image:url(./images/nature-10.jpg)"></div>
    </div>
  </div>

swiperinit.js

var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });

var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });

swiperjs-shortcode.php

<?php   

// Where you want the slider add the shortcode [swiperjs_looper]	
add_shortcode( 'swiperjs_looper', 'themeprefix_swiperjs_thumbslider' );
// ACF Fields
// tl_slide_images = Gallery Field

function themeprefix_swiperjs_thumbslider() {
$images = get_field('tl_slide_images'); //add your correct field name

    ob_start();

    if( $images ): ?>

        <!-- Swiper -->
        <div class="swiper-parent-container">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
        
        <?php foreach( $images as $image ): ?>
            <div class="swiper-slide" style="background-image:url(<?php echo $image['url']; ?>)"></div>

        <?php endforeach; ?>
            </div>
        </div>
         <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>

        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
        
        <?php foreach( $images as $image ): ?>
            <div class="swiper-slide" style="background-image:url(<?php echo $image['url']; ?>)"></div>

        <?php endforeach; ?>
            </div>
        </div>
        </div>
    <?php endif; 

    return ob_get_clean();
}

swiperjsfunction.php

<?php   
// ACF Fields
// tl_slide_images = Gallery Field

function themeprefix_swiperjs_thumbslider() {
$images = get_field('tl_slide_images'); //add your correct field name

    if( $images ): ?>

        <!-- Swiper -->
        <div class="swiper-parent-container">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
        
        <?php foreach( $images as $image ): ?>
            <div class="swiper-slide" style="background-image:url(<?php echo $image['url']; ?>)"></div>

        <?php endforeach; ?>
            </div>
        </div>
         <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>

        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
        
        <?php foreach( $images as $image ): ?>
            <div class="swiper-slide" style="background-image:url(<?php echo $image['url']; ?>)"></div>

        <?php endforeach; ?>
            </div>
        </div>
        </div>
    <?php endif; 
}


/*
 * Call the function direct or hook in with an action
 * themeprefix_swiperjs_thumbslider();
 * 
 * /