Simple Responsive Slider

Simple Responsive Slider (SRS) is a very lite weight slider initially built for use within our themes and later expanded to work with any WordPress website. It uses unslider, a lite weight jQuery slider with a footprint of less than 5kb.

Why Simple Responsive Slider

There are some very good sliders that do a lot of things at the cost of your site speed and user experience, here are few reasons to choose SRS

  1. SRS is a very simple and no-nonsense slider with less than 5kb of CSS and JS combined.
  2. It does what it says without flooding you with a huge list of confusing options.
  3. Live preview of the slider.
  4. Create as many sliders as you want and insert them anywhere you want with a simple shortcode.
  5. Create separate sliders for mobiles and desktops.
  6. Developer friendly, easily extendable with filters and hooks.

How to use Simple Responsive Slider

Installation

Simple Responsive Slider is only available to the users with an active license to the PageSpeed theme. Please download it from the member’s area.

After downloading the plugin

  1. Login to your WordPress dashboard.
  2. Goto plugins -> Add New.
  3. Click on Upload Plugin
  4. Choose the plugin you downloaded before and click on install.
  5. Finally activate the plugin.

How to create a custom slider

On your WordPress dashboard, on the side menu, you will have a new entry called Sliders. Click on add new link under that.

Step #1 to create a new slider

On the add/edit slider screen

Add Slides

  1. Give a name to your slider, can be anything.
  2. Next click on the Add Slider button to add a slide from the media gallery.
  3. Add few more slides ( There is no limit on the number of slides you can have)
  4. Update captions change your slider order.

When you add an image to the slider, title and caption are prefilled from the image. And when you edit those values within the slider, they are only updated in the slider. If you would like to change the alt tag of the image for SEO reasons, edit in the media library. Unlike caption and text, it is automatically reflected in the slider.

Slider Properties

Width & Height: Set the height and width of the images used in the slider.
Slider Type: We have two slider types, one shows the images inline with <src> tag and in the other one images are shown as background images. Background slider is good if you have abstract images or if you want to focus on text. The inline slider is good if you want the slider to add some SEO value to your page.

Next, you have the option to hide the slider on specific devices. This option is useful when you want to create separate sliders for desktops and mobiles. You can insert the two shortcodes and only one of them will be shown based on the device user is using.

Home slider

When you activate it with the PageSpeed theme installed, you can see it’s settings in the customizer.