Demo Download

Today I will share how to create simple and responsive jQuery carousel slider, although there are various ways to do but i will share the simplest way to achieve this goal.

JQuery carousel slider is very helpful, we used it several times in our web projects or blogs, you may want to display your blog recent posts, recent clients, recent project in a carousel slider or you may be want to make it your main page slider.

You might like this Create Custom Checkboxes and Radio Buttons.

First I would like to say thanks to Ken Wheeler who made such a great library to create a Carousel Slider. I will use slick library to create a Carousel Slider.

Steps to Create Simple and Responsive jQuery Carousel Slider

To create a simple and responsive jQuery carousel slider, we need to follow the below steps.

1. Write an HTML Markup
2. Write CSS and Include Slick CSS
3. Include Slick JS Library and Call Slick

1. Write an HTML Markup

Create an index.html file and paste the following HTML markup in its body section.

<div class="carousel clearfix">

<div class="carousel-view clearfix">

<div class="box">
<p><img src="images/pic1.jpg" /><br />
Title of Image<br />
<span>Brief description of above image will be here.</span></p>
</div>

<div class="box">
<p><img src="images/pic2.jpg" /><br />
Title of Image<br />
<span>Brief description of above image will be here.</span></p>
</div>

<div class="box">
<p><img src="images/pic3.jpg" /><br />
Title of Image<br />
<span>Brief description of above image will be here.</span></p>
</div>

<div class="box">
<p><img src="images/pic1.jpg" /><br />
Title of Image<br />
<span>Brief description of above image will be here.</span></p>
</div>

<div class="box">
<p><img src="images/pic2.jpg" /><br />
Title of Image<br />
<span>Brief description of above image will be here.</span></p>
</div>

<div class="box">
<p><img src="images/pic3.jpg" /><br />
Title of Image<br />
<span>Brief description of above image will be here.</span></p>
</div>

</div> <!-- carosel-view End -->

</div> <!-- carosel End -->

2. Write CSS and Include Slick CSS

Create an style.css file and paste the following styles in it and include Slick CSS in the head section.

body {
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
	}
.clearfix:after {
	clear: both;
	}
.carousel {
	width:1150px;
	margin:30px auto;
	}
.carousel h1 {
	font-size:36px;
	margin: 0px 0px 30px 0px;
	font-weight: normal;
	}
.carousel .box {
	float:left;
	width: 33%;
	}
.carousel .box p{
	font-size:20px;
	color:#0067ab;
	text-align:center;
	margin:0px;
	}
.carousel .box p span{
	font-size: 14px;
	color: #000;
	font-weight: bold;
	}
.carousel .box p img{
	margin-bottom: 10px;
	margin: auto;
	}
.slick-prev, .slick-next {
	background: url(../images/arrows.png);
	width: 22px;
	height: 33px;
	position: absolute;
	top: 30%;
	display: block;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	z-index: 100;
	}
	
.slick-prev {
	background-position: 0px;
	left: 0px;
	}
.slick-next {
	background-position: -22px;
	right: 0px;
	}

@media only screen and (max-width: 1180px) {
.carousel {
	width:90%;
	}
}

The above CSS is creating style for our carousel slider, I am going to display three images with title and description on the screen. All the images and libraries that we are using here are available in the download file.

To include Slick CSS, add the following in the head section.

<link rel="stylesheet" type="text/css" href="css/slick.css"/>

3. Include Slick JS Library and Call Slick

We are using here Slick.Js Library so include the following libraries and JavaScript before closing of body tag.

<script src="js/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script>
$('.carousel-view').slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
</script>

The breakpoint above is actually allowing us to display how many images to be displayed on the screen size 600 or 400. This is how we are making it responsive for our mobile devices.

Conclusion

Creating a simple and responsive jQuery carousel slider is very easy, we can easily do it using good library. With the help of jQuery libraries you can do your several tasks so quickly and efficiently.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks