Slick Slider WordPress Without Plugin | Slick Carousel

In this blog we will learn how to add a slick carousel in a WordPress Theme without using any plugins.

There are couple of ways you can add a slick carousel in WordPress:

Using slick-carousel npm package, or,
Download required slick files.

In this blog we will learn the second way, by downloading the slick files.

Step One: Download Slick Carousel files:

The first thing we need to do is download the slick files from kenwheeler.github.io

Create a directories called assets, src and library in the root of your project in the following order. your-theme > assets > src > library
Create two more directories inside library called css and js

Copy the slick.min.js from the downloaded file and place it inside the js folder.
Copy the slick.css and slick-theme.css and place it inside the css folder.
Create another directory called carousel inside assets/src and create a file called index.js

Step Two: Enqueue the files

Now go to your functions.php file in your theme and add the functions to enqueue the files.

add_action( 'wp_enqueue_scripts', 'slick_register_styles' );
function slick_register_styles() {
   wp_enqueue_style( 'slick-css', untrailingslashit( get_template_directory_uri() ) . '/assets/src/library/css/slick.css', [], false, 'all' );
   wp_enqueue_style( 'slick-theme-css', untrailingslashit( get_template_directory_uri() ) . '/assets/src/library/css/slick-theme.css', ['slick-css'], false, 'all' );
   wp_enqueue_script( 'slick-js', untrailingslashit( get_template_directory_uri() ) . '/assets/src/library/js/slick.min.js', ['jquery'], false, true );
   wp_enqueue_script( 'carousel-js', untrailingslashit( get_template_directory_uri() ) . '/assets/src/carousel/index.js', ['jquery', 'slick-js'], filemtime( untrailingslashit( get_template_directory() ) . '/assets/src/carousel/index.js' ), true );
}

Step Three: Add HTML Markup for carousel

Now lets add the HTML markup for the carousel, in the template file where you want the carousel ( lets say index.php )

<div class="posts-carousel px-5">   <!--Slide One-->
   <div class="card">
      <img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
      <div class="card-body">
         <h3 class="card-title">Your Post heading</h3>
         <p>Your Post Excerpt</p>
         <a href="#" class="btn btn-primary">View More</a>
      </div>
   </div>   <!--Slide Two-->
   <div class="card">
      <img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
      <div class="card-body">
         <h3 class="card-title">Your Post heading</h3>
         <p>Your Post Excerpt</p>
         <a href="#" class="btn btn-primary">View More</a>
      </div>
   </div></div>

If you want to loop through a Deafult post or a Custom post type articles you can put this inside a loop.

$args = [
   'posts_per_page'         => 5,
   'post_type'              => 'post',
   'update_post_meta_cache' => false,
   'update_post_term_cache' => false,
];

$post_query = new \WP_Query( $args );
?>
<div class="posts-carousel px-5">
   <?php
   if ( $post_query->have_posts() ) :
      while ( $post_query->have_posts() ) :
         $post_query->the_post();
         ?>
         <div class="card">
            <?php
            if ( has_post_thumbnail() ) {
               the_post_custom_thumbnail(
                  get_the_ID(),
                  'featured-thumbnail',
                  [
                     'sizes' => '(max-width: 350px) 350px, 233px',
                     'class' => 'w-100',
                  ]
               );
            } else {
               ?>
               <img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
               <?php
            }
            ?>
            <div class="card-body">
               <?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
               <?php the_excerpt(); ?>
               <a href="<?php echo esc_url( get_the_permalink() ); ?>" class="btn btn-primary">
                  <?php esc_html_e( 'View More', 'aquila' ); ?>
               </a>
            </div>
         </div>
      <?php
      endwhile;
   endif;
   wp_reset_postdata();
   ?>
</div>

Step Four: Initialise the carousel

Let’s initialise the carousel by calling the .slick() and passing the parent class name of our carousel container as a selecteor. Notice that the carousel container name is posts-carousel , hence the selector will be posts-carousel and the function will be called like so : $('.posts-carousel').slick()

We are also passing the settings for the carousel inside the slick()

( function( $ ) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }

    initiateCarousel() {
      $( '.posts-carousel' ).slick( {
        autoplay: true,
        autoplaySpeed: 1000,
        slidesToShow: 3,
        slidesToScroll: 1,
      } );
    }
  }

  new SlickCarousel();

} )( jQuery );

You can also find some example code on Github

That’s all folks!

Slick Slider WordPress Without Plugin | Slick Carousel

Like this:

Leave a ReplyCancel reply