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();
*
* /
@whynotadv

This comment has been minimized.

Copy link

whynotadv commented Aug 26, 2019

I'm stuck on the template-function.php file part. How do I add it to existing PHP code in a page? I keep getting php errors. What code do I paste into the functions.php file and what code would I use to output the slider on the wordpress template page? Sorry, I almost have it done but I'm still learning php. Any help would be well received and appreciated.

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.