php 来自ACF Gallery的Slick Slider带缩略图导航（链接画廊）

Posted 2021-05-05

		<!--start of gallery-->
		<?php 
		$images = get_field('gallery_w-nav');
		if( $images ): ?>
		<div class="slider-for">
			<?php foreach( $images as $image ): ?>
				<div class="slick-container">
					<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
				</div>
			<?php endforeach; ?>
		</div>
		<div class="slider-nav">
			<?php foreach( $images as $image ): ?>
				<div>
					<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
				</div>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>
	<!--end of gallery-->
	

<!--instantialte that bitch-->
$(document).ready(function($){
 $('.slider-for').slick({
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows: false,
 fade: true,
 asNavFor: '.slider-nav'
 });

 $('.slider-nav').slick({
 slidesToShow: 3,
 slidesToScroll: 1,
 asNavFor: '.slider-for',
 dots: false,
 centerMode: true,
 focusOnSelect: true,
 arrows: true,
 autoplay: false
 });
});

</script>