how to create responsive wordpress slider

WordPress Slider is the most important thing on any wordpress website as it is the one that displays the featured products and services to the coming visitor, these days while creating wordpress slider we have also to take care of the different size of screens that a visitor uses to see a website. wordpress slider

A Visitor to the website can use tablet, desktop, laptop or a smartphone to view the wordpress slider so the wordpress slider should be responsive that is able to adjust itself according to the size of the screen. One important thing that we need to create a wordpress slider is to know how to resize images, as all the images that we are going to insert into our wordpress slider will be of equal size. You can resize images in GIMP a free image manipulation software. Before resizing the image for wordpress slider you need to decide about the size of the slider. For our demo we will keep the slider 1000px(pixels) wide and 550px(pixels) height. Lets first install the slider plugin for wordpress. Search for Cyclone slider. best wordpress sliderClick on Install now to install the plugin. After the plugin is installed and activated you will see a new menu item appear on the vertical admin menu bar.wordpress slider plugin When you click on the menu item that says Cyclone slider a new submenu will appear. In this Sub menu click on add slideshow option and you will see the following screen.wordpress slider plugin freeNow here in the top field give a name to the slide show and then click on the add slide button, on clicking the add slide button you will see the following sub form added to the above screen which will give you the option to add imageslider-wordpressClick on the add image and then the same media uploader will appear as appears in the add media option, you can upload the resized slide that you created and then you will see the following screen just the image that you uploaded will be different.slider wordpress pluginnow again click the add slide option and repeat the procedure in my case i am just adding two slides for demo.


Now scroll a little towards bottom and have a look at the right hand side and look at things under basic settings, You will just need to change very few settings change the width and the height of the slider to what you want, like in our case it would be 1200px by 550px also change the next slide delay to 2000 mili seconds as the default value of 4000 milli seconds make the slide show very slow. After doing the important settings click on the publish button at the top right. And your slide show is now functional and now you will be able to see a peview of your slides. And you will also see the shortcode for the slider has also appeared in the designated fields.wordpress responsive sliderNow copy the shortcode in Your shortcode field and paste it in the edited page/post in visual mode where you want the wordpress responsive slider to appear. After this click on the Publish/update and then open that page following is the screen shot of what appears in our case.image slider for wordpress

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

(Visited 58 times, 1 visits today)

More from my site


Posted by deepak.kapoor

An Active Youtuber, Blogger, Traveller, Programmer, Wordpress developer. Likes to spend his free time Motorcycling through the hills.

One thought on “how to create responsive wordpress slider”

  1. Thanks for sharing such an useful information.
    I want to share one slider plugin Avartan Slider. It is responsive plugin to create stunning image slider and video slider for your WordPress website. See more:

Leave a Reply

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