Slick Carousel

Setting up Slick Carousel (for front page slideshows or rotating featured events)

1. Download slick --> http://kenwheeler.github.io/slick/

2. Extract the directory and place it in your theme (the default structure is nested slick/slick/contents)

3. Enqueue the necessary files (be sure jQuery is enqueued first) :

   wp_enqueue_script('slick_script', get_template_directory_uri() . '/slick/slick/slick.min.js', array('jquery'), null, false);

   wp_enqueue_style('slick-style', get_template_directory_uri() . '/slick/slick/slick.css');

   wp_enqueue_style('slick-theme', get_template_directory_uri() . '/slick/slick/slick-theme.css');

4. Initialize the HTML elements with slick using jQuery :

   $(parentElement).slick({
       infinite: true,
       slidesToShow: 4,
       slidesToScroll: 1,
       arrows: true
   });

(initialize the parent container of the elements that you want to slide

5. When setting the slidesToShow value, there must be more elements than that number. Example: slideToShow: 4, there must be 5 elements in order for the next and prev arrows to be available

There are several different configurations for Slick with different intialization values, it is very customizable and was a replacement ( by foundation ) of its own orbit slider. The website has all of the examples and initialization variables