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