How to Create a Photo Slideshow With the Layers Slider Widget

How To  Tutorials  Last Updated: Layers ver. 1.2.7 Time to Read: 2 minutes

This tutorial is part of our feature 10 Ways to Use the Layers Slider Widget. For general help with using the Slider Widget and getting familiar with the controls, see the Layers User Guide.

The Layers Slider has two primary ways of handling images: the background image and the featured image. You can use either to create a slideshow with the Slider widget, but using Background images has a few disadvantages – you can’t link them, they are not inherently “responsive” (ie they do not automagically scale the slider on mobiles) and they cannot affect the slider’s size. Featured images, on the other hand, can do all these things, but cannot be overlayed with text by default. This tutorial provides steps for creating a slideshow using featured images to allow the most control.

slideshow

To begin, choose the page you wish to add the widget to and EDIT LAYOUT (or from the front-end, choose Customize in the admin toolbar)

  1. Click EDIT LAYOUT in the Customizer, then click your page’s BODY panel.
  2. Click +ADD WIDGET and choose the Layers Slider widget
  3. Expand the second and third slides and click the red trash-can icon to delete them.
  4. Click LAYOUT in the widget Design Bar and choose Full Screen
  5. Click SLIDER in the widget Design Bar. Set the following:
    • Show Slider Arrows: checked
    • Show Slider Dots: checked
    • Animation Type: Slide
    • Auto-play Slides: unchecked
  6. Click on the Background Image button in the slide’s toolbar and select/upload a background image.
    • For best results, use an image at least 2000px wide and chose the Stretch option to auto-scale it to the screen size.
    • Always choose a background color that closely matches your background image dominant color so the text color invert triggers correctly.
  7. Click the Featured Image button in the toolbar and select/upload your first photo.
    • For best results use photos at least 1000px wide
    • If your images are not all the same dimension, you should choose the landscape crop option here (horizontal rectangle icon) to make the slideshow a uniform size.
  8. Click the Image Align button and ensure the Image-Top option is selected – this will keep your photo centered.
  9. Remove the Title and Excerpt
  10. Remove the default button text. If you want to link your images to a post or page, add the link to the Button Link field
  11. Click +ADD NEW SLIDE to duplicate this slide configuration, then edit the featured image option

There is no support for lightbox linking in the stock Slider Widget. Check out Layers Extensions under your Marketplace admin page such as Layers Light Slider or Layers Essential Add-ons

View Example