Slick Slider WordPress Without Plugin | Slick Carousel

The Slick Slider library is a solid option for displaying slideshows on your website, and my go-to solution the majority of the time. In this post, I’ll show you how to set it up for your next project.

Being a developer, I personally hate slider plugins. In my opinion, they give you so many options that you end up not being able to maintain them without having to do all kinds of magic.

Step One: Download Slick Carousel files:

Create 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 the library called css and js

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

Step Two: Enqueue the files

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

Function custom_theme_enqueue_styles() {

wp_enqueue_style('slick-css', get_stylesheet_directory_uri().'/css/slick.css');
    wp_enqueue_script('slick-js', get_stylesheet_directory_uri() . '/js/slick.js', array( 'jquery' ), '1.0', true );
}
add_action('wp_enqueue_scripts', 'custom_theme_enqueue_styles');

Step Three: Add HTML for carousel

Now, let’s add the HTML markup for the carousel in the template file where you want the carousel (let’s 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 default 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>

Let’s initialize the carousel by calling the .slick() and passing the parent class name of our carousel container as a selector. 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 );

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 selector. 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 );

Also read :-
Using Context API to create text alert or notification at the top of a page