php LIghtSlider - 图像轮播缩略图滑块与WordPress中的ACF

Posted 2021-05-04

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