Using slider with elementor

The ‘Image gallery‘, ‘Post grid‘ and ‘Relationship post in a grid‘ widgets now integrate the new Slider display mode.
It comes with a range of flexible and modular customization options relative to the component used.
You can freely resize images by controlling their height, width, and aspect ratio.
Automate scrolling and the number of items displayed as well as several animation options.

Table of Contents

Select slider mode

To enable Slider mode, open the ‘Layout’ section and select ‘Slider’ from the list.
The ‘Slider’ section appears in the list of sections.
Beyond after unfolding it you can apply the configuration you want.

Layout select slider entry

Configure the slider

Autoplay: items scroll automatically,
Autoplay speed: scroll speed,
Loop: the scroll resumes at the beginning or not. Enabled with Autoplay = ‘yes’,
Displayed images: Number of items displayed,
Direction: scroll direction (left or right)
Transition effect: four transitions (Default, Coverflow, Creative, Fade). ‘Creative and Fade’ transitions display only one item at a time. You can change the width of the slider,
Image ratio: five aspect ratios for images (Default, 4/3, 3/2, 16/9, 26/9),
Vertical position: position the image vertically according to the selected ratio.
Navigation: two arrows on either side of the slider to move items forward/backward,
Pagination: a series of bullets under the slider to illustrate the number of items and their movement,
Display scollbar: discreet scroll bar under the slider to illustrate the number of items and their movement.

Style controls and buttons

You can define the size, and the color of the navigation arrows as well as the size of the bullets, their colors and the color of the active bullet. The ‘Link and Lightbox buttons’ sections are only visible for the ‘Image gallery’ widget.
Slider style controls buttons

Final outcome

Post grid slider with the last ten posts.
Side-by-side layout with text on the left
Slider autoplay equal ‘yes’ + Transition effect equal ‘Fade’ + Display scrollbar equal ‘yes’.
The link is on the title and on the image.

Add Lottie animation in Elementor

Add Lottie animation in Elementor

Lottie Animation for the free version of Elementor is a new widget that allows you to enhance the user interface and will enhance the visual experience of your visitors

How to add RSS feed reader with Elementor

How to add RSS feed reader with Elementor

The free version of RSS Feeds Reader for Elementor is a new component that will allow you to aggregate news feeds from different sources and share them with your site visitors.

Add a News Ticker reader in Elementor

Add a News Ticker reader in Elementor

News Ticker for Elementor free version is a new widget which will allow you to display your favorite news feeds continuously on single line across the screen

Add a PDF viewer to Elementor

Add a PDF viewer to Elementor

PDF viewer for the free version of Elementor is a new component that will allow you to integrate one or more PDF files from the media library or from a remote site by applying rendering options to facilitate the appropriation of these documents

How to add OpenStreetMap to elementor

How to add OpenStreetMap to elementor

OpenStreetMap for the free version of Elementor is a new component which will allow you to integrate maps and position points of interest to make your site more attractive

Credit

Slider mode is integrated with the Swiper.js library

Leave a Comment