Functions, jQuery, HTML, and CSS to get started with Slick Slider in WordPress using ACF.

slick_slider

<?php /* FUNCTIONS */ ?>

<?php
///////////////////
// ENQUEUE SLICK //
///////////////////

function enqueue_slick() {
    wp_enqueue_script( 'slick-js', '//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js', 'jquery', '1.4.1' );
    wp_enqueue_script( 'slick-init-js', trailingslashit( get_stylesheet_directory_uri() ) . 'js/slick-init.js', 'jquery', 1.0 );
    wp_enqueue_style( 'slick-css', '//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css', '', '1.4.1' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_slick' );

?>

<?php /* JAVASCRIPT */ ?>

<script>

////////////////
// SLICK INIT //
////////////////

jQuery(function($){
	$('.keokee-slider').slick({
		autoplay: true,
		fade: true,
		speed: 2000,
		autoplaySpeed: 6000,
		prevArrow: '<a class="left-arrow" href="#">&lsaquo;</a>',
		nextArrow: '<a class="right-arrow" href="#">&rsaquo;</a>'
	});
});

</script>

<?php /* PAGE */ ?>

<!-- SLIDER PHP/HTML --->

<section id="home-slider" class="fade-in clearfix">

   <?php if ( have_rows( 'slides' ) ) : ?>
		<div class="keokee-slider clearfix">
            <?php while ( have_rows( 'slides' ) ) : the_row();
				$image = get_sub_field( 'slide_image' );
				$image_url = $image['url'];
                $slide_text = get_sub_field( 'slide_text' );
                $slide_link = get_sub_field( 'slide_link' ); ?>
				<div class="slide">
                    <?php if($slide_link) : ?>
                    <a href="<?php echo $slide_link ?>">
                        <img src="<?php echo $image_url ?>" />
                    </a>
                    <?php else : ?>
                        <img src="<?php echo $image_url ?>" />
                    <?php endif; ?>

                    <?php if($slide_text) : ?>
                    <div class="container">
                        <div class="half"></div>
                        <div class="half">
                            <div class="slide-text"><?php echo $slide_text ?></div>
                        </div>
                    </div>
                    <?php endif; ?>
				</div>
			<?php endwhile; ?>
		</div>
	<?php endif; ?>

</section>

<?php /* STYLESHEET */ ?>

<style>

/**************
** SLICK CSS **
**************/

.slick-slider .slide,
.slick-slider .slide img {
	width: 100%;
	height: 400px;
}

.slick-slider p:hover {
	cursor: pointer;
}

.slick-slider .left-arrow {
	text-align: left;
}

.slick-slider .right-arrow {
	text-align: right;
}

</style>