Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active June 1, 2024 22:13
Show Gist options
  • Save neilgee/4bdaad5361a89b0818ae79f6de8c2c9c to your computer and use it in GitHub Desktop.
Save neilgee/4bdaad5361a89b0818ae79f6de8c2c9c to your computer and use it in GitHub Desktop.
SwiperJS and ACF Image Gallery Thumbnail Carousel
<?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 -->
<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>
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
}
});
<?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();
}
<?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();
*
* /
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment