Getting Started with the Sliders Extension

The Sliders Extension for Easy Property Listings allows you to create image sliders with or without thumbnails and provides a lot of features and customisation options for you to configure the slider.

Installation and License

First is to download the extension from your account or from the purchase email and then install it into your WordPress website. 

Once you have installed and activated the plugin activate the license for the Sliders extension. Once the license has been activated and you have an active subscription for the extension you will be able to update the extension from your WordPress plugins screen as you do with your other plugins.

It also works with the Gallery extension As you could set the sliders to replace the featured image and the gallery to replace the gallery on your listings or vice versa!.

Sliders pre-configured options

On first activation of the sliders extension the slider is pre-configured so go ahead and view your listing. Your sliders should look like this.

Overview

There are a lot of options available in the Sliders extension to control the image sizes, layout, thumbnails, direction, effects, arrows and a lot of possible combination that can help you configure the Sliders extension for your real estate website project. 

We will just cover the basics in this getting started guide.

General Settings

These settings control the overall slider configuration and most important is the width and height size options. 

Set the correct size

The default slider configuration is 800 x 600 pixels. This is the most important setting to get right as if the slider space on your page is 1000 pixels or more and your slider is set to 800 the images will stretch to fill the space but the image quality will look pixelated.

See this guide on how to determine the best image size settings to use: Low resolution images in Sliders

Slider: Activate the slider on single listings.
Target: Where should the slider be loaded. (Featured Image or Gallery section)
Width: Size in pixels, leave blank for auto size. Setting a size is optimal.
Height: Size in pixels, leave blank for auto size. Setting a size is optimal.
Lightbox: Display a lightbox when the main slider image is clicked.
Status sticker: Display the listing status sticker on the slider.
Admin image size: Image size to use when editing listings and using the image management tool.
Featured image: Include the featured image in the slider.
Reverse image order: Reverse the displayed order of the images. Enable when importing images.
Floor plans: Include the floor plans as slider images.
Lazy load images: Dynamic image loading, improves page loading speed.

Image Size

Use the following settings control the images sizes

Resize images: If enabled new images will be created based on specified width & height. Or you can use images registered with your site. Use the Custom Image tab to register your own image sizes.
Cropping: Crops each slider image based on assigned width & height. Disable if images are about right size. Only works when resizing is enabled
Crop alignment: Images will be cropped from top / bottom / center.

Quality: Image quality of cropped images. Higher is better.

Thumbnails

These settings below adjust the thumbnail options for the slider.

Thumbnails: Enable to display thumbnails in your slider and display the available options.
Width: Size in pixels, leave blank for auto size. Setting a size is optimal.
Height: Size in pixels, leave blank for auto size. Setting a size is optimal.
Orientation: Display thumbnails horizontally or vertically of the main image.
Lanes: Number of thumbnails lanes.
Count: Number of thumbnails to display, thumbnail size will effect this setting.
Horizontal spacing: Space between thumbnail images. Size in pixels.
Vertical spacing: Space between thumbnail images. Size in pixels.

Offset: Adjust the offset to shift the thumbnail starting position. Accepts positive or negative values. E.g.: 10px or -20px

Custom Images

Use the following settings to register image sizes to use in the slider. 

Once you register an image or changed the size or crop settings, you must use a plugin like Force Regenerate Thumbnails or reGenerate Thumbnails Advanced to re-process all the images to the new size.

Featured

Register image: Enable to register an image size called:  epl_slider_image_featured and to display the available sizing options.
Width: Size in pixels.
Height: Size in pixels.
Crop: Crops each image based on assigned width & height.
Crop alignment: Horizontal: Cropping x axis.
Crop alignment: Vertical: Cropping y axis.

Thumbnail options.

Enable to register an image size called:  epl_slider_image_thumbnail and to display the available sizing options.

(other options as above)

Arrows

Navigation Arrows: Customise your navigation arrows.

Arrows: Select a navigation arrow type to display options. (Disable, Always, On Mouse Hover).

Keyboard control: Allow the user to use the keyboard to navigate the slider images.
Icon mode: Font style provides styling options like color and size. (Font or Icon *Font is recommended)
Color: Select colour with the colour picker.
Hover color: Select colour with the colour picker.
Size: Size in pixels.
Style: Select from 10 icon styles.

Slideshow

The settings below adjust the slideshow options.

Auto play: Enable to animate the slider automatically and to display the animation option.
Transition speed: In milliseconds. Time each image is displayed.
Animation speed: In milliseconds. Speed at which the images transition.
Slideshow transition effect: Animation effect when image changes. Select from over 30 effects

Pause on hover: Pause the slideshow when the mouse is over the slider.

Mobile

The settings below adjust configuration options for the slider display when viewed on a mobile device. Not based on browser breakpoint sizing.

Thumbnails: Enable to load a different image size on mobile devices and display available options. Use a mobile device to preview.
Image size: Select the WordPress registered image size for your image.
Width: Size in pixels, leave blank for auto size. Setting a size is optimal.
Height: Size in pixels, leave blank for auto size. Setting a size is optimal.

Touch swipe: Select the swiping direction or disable this feature.

Listing Cards

The settings below adjust the slider display when viewing your listings archive pages or shortcodes.

Archives / Search Results: Display the slider on your search results archive pages.
Floor plans: Include the floor plans as slider images.
Shortcodes: Display the slider in your [listing], [listing_category], [listing_advanced]. shortcodes
Image size: Select the WordPress registered image size for your image.
Width: Size in pixels, leave blank for auto size. Setting a size is optimal.
Height: Size in pixels, leave blank for auto size. Setting a size is optimal.

Status sticker: Display the listing status sticker on the slider.

Tools

The settings below allow you to remove the slider registered images. WordPress registered images will not be removed using this tool

Related Articles