WordPress, JS

slick slider customPaging – show slide titles

slider using ACF repeater field

<?php if( have_rows('slider_builder') ): ?>
    <div class="page-banner" id="slider-container">
	<div id="slider">
            <?php while( have_rows('slider_builder') ): the_row(); ?>
 
                <div class="slide" data-title="<?php the_sub_field('slider_title'); ?>">
 
			<div  class="slide-inner" style="background-image: url(<?php the_sub_field('slider_image'); ?>); background-position: <?php the_sub_field('slider_image_position'); ?>">
				<div class="wrap">
					<div class="slider-content">
						<?php if(get_sub_field('slider_title' ) != ""): ?>
							<h1><?php the_sub_field('slider_title'); ?></h1>
						<?php endif; ?>
 
						<?php if(get_sub_field('slider_subtitle' ) != ""): ?>
							<p><?php the_sub_field('slider_subtitle'); ?></p>
						<?php endif; ?>
					</div>
				</div>
			</div>
                </div>
 
            <?php endwhile; ?>
 
	</div>
    </div>
<?php endif; ?>

JS

$("#slider").slick({
	dots: true,
    arrows: false,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
 
	customPaging : function(slider, i) {
        var slide = slider.$slides[i],
            pagination = $(slide).data('title');
        return '<div>' + pagination + '</div>';
    },
});