Slick Carousel Button Options

by Kenneth Stoddard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<div class="example-1">
	<h2>Example 1</h2>

	<div class="slick-carousel-1">
		<div class="slide">Slide One</div>
		<div class="slide">Slide Two</div>
		<div class="slide">Slide Three</div>
	</div>
</div>

<div class="example-2">
	<h2>Example 2</h2>
	
	<div class="slick-controls">
		<button class="next">Next</button>
		<button class="previous">Previous</button>
	</div>

	<div class="slick-carousel-2">
		<div class="slide">Slide One</div>
		<div class="slide">Slide Two</div>
		<div class="slide">Slide Three</div>
	</div>
</div>

<div class="example-3">
	<h2>Example 3</h2>
	
	<div class="slick-controls">
		<button id="slick-next">Next</button>
		<button id="slick-previous">Previous</button>
	</div>

	<div class="slick-carousel-3">
		<div class="slide">Slide One</div>
		<div class="slide">Slide Two</div>
		<div class="slide">Slide Three</div>
	</div>
</div>

<div class="example-4">
	<h2>Example 4</h2>
	
	<div class="slick-controls">
		<button class="next">Next</button>
		<button class="previous">Previous</button>
	</div>

	<div class="slick-carousel-4">
		<div class="slide">Slide One</div>
		<div class="slide">Slide Two</div>
		<div class="slide">Slide Three</div>
	</div>
</div>

JavaScript

$(document).ready(function(){
	$('.slick-carousel-1').slick({
		// @type {string} html
		nextArrow: '<button class="any-class-name-you-want-next">Next</button>',
		prevArrow: '<button class="any-class-name-you-want-previous">Previous</button>'
	});

	$('.slick-carousel-2').slick({
		// @type {string} jQuery Selector
		nextArrow: '.next',
		prevArrow: '.previous'
	});

	$('.slick-carousel-3').slick({
		// @type {object} DOM node
		nextArrow: document.getElementById('slick-next'),
		prevArrow: document.getElementById('slick-previous')
	});

	$('.slick-carousel-4').slick({
		// @type {object} jQuery Object
		nextArrow: $('.example-4 .next'),
		prevArrow: $('.example-4 .previous')
	});
});