Menu Close

Slick Slider Filtering With Example

Slick slider filtering

Let’s see how to create a slick slider carousel with filtering slides using html, css and jquery. Follow the below snippet to create slick filter with responsive design.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" type="text/css" href=""/>
    <link rel="stylesheet" type="text/css" href=""/>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Slick Slider Carousel With Filter</title>
    <div class="main">
        <div class="slider slide-show">
        <div class="button-style">
            <a class="button-filter">Unfilter Slides</a>
        slidesToShow: 4,
        slidesToScroll: 4
var filtered = false;

$('.button-filter').on('click', function(){
  if (filtered === false) {
    $(this).text('Unfilter Slides');
    filtered = true;
  } else {
    $(this).text('Filter Slides');
    filtered = false;


Create an external stylesheet and add it to the above example to create responsive slick filter.

.main {
  margin:0 auto;
h2 {
    background: #FFD700;
    color: #0000CD;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
.button-style {
    padding: 0;
    margin-bottom: 10px;
    text-align: center;
.button-style .button-filter {
    background: #FFD700;
    color: #0000CD;
    margin: 5px;
.button-filter {
    background: #3498db;
    color: #FFD700;
    display: inline-block;
    font-size: 16px;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    width: 50%;

More examples for slick slider

Posted in HTML, JavaScript, jQuery

You can also read...