Simple and Responsive jQuery Carousel Slider


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

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.
  1. Hello, I’am creating my web site, also I studing to get a job.
    as we say in Mexico, me caiste del cielo, due I would find some parts of profecionals web developers to increase the posibilty of improve my code organization.
    So today I recived an email about paypal module, and I check your web page and your information and inmediatly I feel glad to find someone that share your knoledge, at the end I sow an article from Javed Ur Rehman, and I like a lot the great idea about your web, and also all for web programation lenguajes.

    Congratulations for your effort.

    Josserand Ruiz Espinosa.

    1. Dear Shivansh,

      It depends on the server you are using, mostly paid service available for it.
      You will need to check if user have subscribed then let them download the page.
      I am available for freelance work, if you want to hire me send me email here [email protected] with title Freelance work.
      I will create it for your website too.

      1. Can the Title and Description of the Image be set from an HTML table like by combing the database connection and query from the “Display From Database Into HTML Table Using PHP?

Leave a Reply

Your email address will not be published. Required fields are marked *