Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LIghtSlider - Image Carousel Thumbnail Slider with ACF in WordPress
<?php // <~ don't add me in
add_action( 'wp_enqueue_scripts', 'ls_scripts_styles', 20 );
/**
* LightSlider Scripts
*/
function ls_scripts_styles() {
wp_enqueue_style( 'lightslidercss', get_stylesheet_directory_uri(). '/css/lightslider.min.css' , array(), '1.0.0', 'all' );
wp_enqueue_script( 'lightsliderjs', get_stylesheet_directory_uri() . '/js/lightslider.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'lightsliderinit', get_stylesheet_directory_uri() . '/js/lightslider-init.js', array( 'lightsliderjs' ), '1.0.0', true );
}
jQuery(document).ready(function($){
// Extra functions
$('.image-gallery').lightSlider({
gallery:true,
item:1,
auto:false,
loop:true,
thumbItem: 9,
onSliderLoad: function() {
$('.image-gallery').magnificPopup({ delegate: 'a', type: 'image' });
$('.lSGallery li:only-child').hide();
}
});
});
jQuery(document).ready(function($){
$('.image-gallery').lightSlider({
gallery:true,
item:1,
auto:false,
loop:true,
thumbItem: 9,
});
});
<?php
// Where you want the slider add the shortcode [lightslider_looper]
add_shortcode( 'lightslider_looper', 'tl_light_looper' );
function tl_light_looper() {
// ACF Custom Fields
// tl_slide_images = Gallery Field
$images = get_field('tl_slide_images');//add your correct field name
ob_start();
if( $images ):
?>
<div class="tl_slide_photo_container">
<ul id="light-slider" class="image-gallery">
<?php foreach( $images as $image ): ?>
<li data-thumb="<?php echo $image['url']; ?>">
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
return ob_get_clean();
}
<?php
// ACF Fields
// tl_slide_images = Gallery Field
function themeprefix_lightslider_thumbslider() {
$images = get_field('tl_slide_images'); //add your correct field name
if( $images ): ?>
<ul id="light-slider" class="image-gallery">
<?php foreach( $images as $image ): ?>
<li data-thumb="<?php echo $image['url']; ?>">
<a href=""><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif;
}
/*
* Call the function direct or hook in with an action
* themeprefix_lightslider_thumbslider();
*
* /
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.