How to add Responsive jQuery slider to website

Leave a Comment

jQuery is JavaScript library and its designed to simplify the client side HTML coding in simple words jQuery will help you to make your website look awesome and user friendly. 

Well, i am not going to show you how to design jQuery slider i am just going to show you how to add the prepared slider to your website.

You can download the jQuery slider from here and make sure you have a template of your website.

Add jQuery slider to your website

Now all you have to do is to download and extract the jQuery slider’s files and then simply put them together with your website’s file and make sure that name of the all files are different and you can also put all the code in one single file like i have added all slider CSS code to default.css and now i just don't need to include the jQuery slider’s CSS code because we have added that in the default.css file (default.css is the very basic CSS file of my template).

While including the files make sure your path is correct else its not going to work well.

Now if you just don’t want to change the path then you can just put the slider files with your website’s file but in that case the name of the files should be different.

There are two effects in this slider one is fade effect and one is slider effect you can use any effect you like but i am just going to show you fade effect in this jQuery tutorial.

And then simply edit the slider’s index.html and then copy this part of the code and add to your website’s page (you can find it by editing  the slider’s index.html).

Jquery slider for the html 
Now make sure that you have included the slider’s js and css files (you don’t have to worry about it if you have added that code in your default css file and js file)!

add jquery slider to the html

Now just save your website’s html page and then the jQuery responsive slider will be there and you have successfully added the responsive jQuery slider to your website.

jQuery(document).ready(function($) {

    height      : 320,
    width       : 620,
    responsive  : true


You can change the height and width of the slider using the above code and i hope you learned something new from this web design tutorial!


Say connected with us for more web design and web development tutorial!


Post a Comment