Slick Slider

Last week, I talked about plugins and their uses in WordPress websites. This week, I learned how to implement my own image carousel using slick sliders. There is nothing wrong with using plugins to create fast websites, but they can also be a crutch in developing sites. As developers, we want to show our knowledge of developing and designing sites. During my internship, my mentor taught me how to implement the slick slider carousel instead of my previous WP carousel. We implemented a sync-slider, an image carousel where the controller is on the bottom and the top image is full size.

Left is the top image, Right is Controller

I wanted to showcase my work in an image gallery, and now users can control the slider and view my images. I got slick slider code from Slick, and they have many different kinds of image galleries to choose from. We implement slick-slider by adding it to our functions.php where the vast majority of our code is placed.

functions.php
 wp_enqueue_style( 'slick-css',  get_stylesheet_directory_uri() . '/inc/slick/slick.css', array());
wp_enqueue_style( 'slick-theme-css',  get_stylesheet_directory_uri() . '/inc/slick/slick-theme.css' );
wp_enqueue_script( 'slick-js',  get_stylesheet_directory_uri() . '/inc/slick/slick.js', array( 'jquery' ), '1.8.4', TRUE );
wp_enqueue_script( 'slick-init',   get_stylesheet_directory_uri() . '/inc/slick/slick-init.js', array( 'slick-js' ), '1.0.0',  TRUE );

We are enqueuing the CSS code in our functions.php file. In this script, we start from the bottom, initialize the slick-init file, and require the slick-js file. After that, we will do the same for the slick-js, and require jquery. The last two scripts require the files of slick-theme-CSS and slick-CSS. Everything except for the slick-init file comes together when you download the zip folder from the site. After you implement the folder and have created the slick-init file, you need to write some functions for the gallery.

slick-init.js
(function($) {
$('.your-class').slick({
dots: true
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
arrows: true,
dots: true,
centerMode: true,
focusOnSelect: true
}); })(jQuery);

We created a function that will contain the code from slick that will have both the big slider and the small slider. Once we have the function, we created a div that will hold the class containing our code.

<?php
$images = get_field('gallery');
if( $images ): ?>
<div class="slider-for table-slider">
<?php foreach( $images as $image_ID ): ?>
<div>
<?= wp_get_attachment_image($image_ID, "full") ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if( $images ): ?>
<div class="slider-nav">
<?php foreach( $images as $image_ID ): ?>
<div class="small-slider">
<?= wp_get_attachment_image($image_ID, "full") ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>

The slider-for and slider-nav classes contain the information from our function in slick-init. This now initializes our code and creates our two sliders. We now have two sliders syncing up and working at the same time. My mentor helped me understand implementing slick slider, and explaining to me why we create galleries and other assets rather than rely on plugins.