How to Create a Slider in WordPress

Step 1: Creating Slider by Supsystic

  1. On the left navigation menu click “New Slider”.
  2. Enter the name of slider.
  3. Choose slider template. You have the ability to choose one of 6 amazing templates:
    • Bullets navigation
    • Slideshow mode
    • Thumbnails navigation
    • Post Feed slider (PRO feature)
    • HTML content (PRO feature)
    • Video slider (PRO feature)
  4. Click “OK” button.

On the next steps you can change the slider template.

Step 2: Adding images to the Responsive Slider

  1. Click on “Add Images” button.
  2. Choose images from WordPress Media Library – mark those images that you like or need. If there are no images that you need, click the Upload Files tab – here you can drop files anywhere to upload or select files from your computer.
  3. Click on “Choose Image” button.
  4. Images will appear in the Media block at the left side. Here you can:
    • Add caption to image – it will be displayed on the caption effect of the slider.
    • Attach links to image – it will go to the link when you click the image.
    • Add SEO – tags for search requests.
    • HTML  – support of  html-elements inside slides (PRO feature – only for jssor slider)

Besides PRO version of slider plugin allows you to add videos and posts of your site to the slider.

To add videos to the slider click on “Add Video” button, then paste video URL and click “Import”. Slider by Supsystic supports such platforms as Youtube and Vimeo.

Possibility to add video you have only for BxSlider and Jssor slider.

In order to add pages and posts you need – select post / page from corresponding dropdown list at the “Select posts to show” block and click “Add post” / “Add page” button – it will appear at the “Posts and Pages” block.

This option is available only for coin and jssor sliders.

Step3: Editing of Image Slider settings

Firstly, you can change the plugin – simply click “Change slider” button, choose the another module and click “Change” button. But please note that current settings will be removed without ability to restore.

You can select one of 3 sliders:

  • BxSlider – easy to use image slider plugin with built-in touch support.
  • Coin Slider – slideshow plugin for creating slideshows with amazing transition effects.
  • Jssor Slider (PRO feature) – touch swipe and responsive javascript image slider.

And secondly, let’s start with the configuration of BxSlider.

The BxSlider allows you

  • set the width and height of the image slider (width can be set in pixels or percent, and the height only in pixels);
  • choose the mode of transition between slides – Horizontal,Vertical or Fade;
  • enable the slideshow – auto navigation between slides;
  • enable slideshow controls;
  • select type of navigation between slides – standard or thumbnails;
  • enable displaying of the images caption;
  • set the speed of slide transition in milliseconds;
  • enable start of slider on a random slide;
  • choose type of easing, which will be used during transitions of slideschoose type of easing, which will be used during transitions of slides;
  • enable touch support – slider will allow touch swipe transitions;
  • enable one-to-one touch option – non-fade slides will follow for the finger when you swipe it across the screen (available, when touch option is enabled);
  • set the swipe threshold – amount of pixels of a touch swipe, which must be exceeded in order to execute a slide transition (only used if touch is enabled);
  • enable pager
  • choose type of pager: Full – a pager link will be generated for each slide, or Short – a x/y pager will be used (ex. 1/5)

Also this slider has a unique PRO feature – a visual editor! To edit slider in visual mode – click “Builder” button. Here you can specify settings for

  1. Viewport
  2. Caption
  3. Buttons

With Coin slider you have the opportunity

  • set the width and height of the slider – only in pixels
  • select one of the amazing transition effects of slides – you can choose between four types of transition effects: random, rain, swirl and straight;
  • set the opacity of caption;
  • enable pause mode, when mouse is over slider container;
  • hide or show navigation controls of slider;
  • show all images with their full size links

Jssor slider (PRO)   contains such features as

  • Width and height of slider;
  • Mode – type of transition between slides – Horizontal or Vertical;
  • Arrows – a huge variety of arrows for navigation, also you can disable it;
  • Bullet control – includes a wide range of bullet points, you can enable this option in order to control the navigation of slides using bullet points;
  • Responsive size slider – enable or disable auto resize of the slider. Useful if you need to use fixed width sliders;
  • Thumbnails slider navigation – enable the navigation control with thumbnails of images, which is much simplify and speed up access to all images of the slider by supsystic;
  • Slideshow – enable auto navigation between slides;
  • Slideshow Speed;
  • Select Shadow – choose one of the box shadow effects, which were first designed in Photoshop and then implemented using CSS3

Important! After changing the settings of slider plugin don’t forget to click “Save” button.

Step 4: Preview settings

After you change some settings – with responsive slider by supsystic, you can immediately see the result in a live preview. Simply click on “Preview” button and you will see your slider in a popup window.

Step 5: Displaying Slider WordPress Plugin on the website

Over the settings of slider you can see the shortcode.

Copy and paste the shortcode into your post or page and Slider by Supsystic plugin will automatically create the slider on your page using the settings you choose above.

Important! Shortcode must be inserted in a text editor page, and not in the visual.

Get plugins bundle today and save over 80%