Introduction #
The SP Carousel Control extension allows you to control any and all Sliders & Carousels made with Swiper.JS.
These include ALL the carousels & sliders elements that comes with Elementor free and pro: image carousel, slides, media carousel, reviews, testimonial carousel, and even section and column background slideshows.
It also includes the SP Justified Carousel that comes with Switchers Pro, and the carousels made from the SP Column to Swiper extension.
It also includes all SwiperJS carousels & sliders that comes with Elementor addons. Learn more about how to know if a particular slider element from an addon is compatible or not.
Enable #
Enable to make the current element part of the controlled Swiper set.
Swiper Set Name #
Give all the elements that are part of the same Swiper set the same name, to link them with each other.
Be careful to make the name unique, so that if you copy paste the design on another page, or have it in a popup, it won’t interfere with a Swiper set already present there.
Type #
Select the type you want the current item to be:
Carousel / Slider #
Give this type to the Carousel or Slider elements that you want to be part of the Swiper Set.
These carousels and sliders will then be able to be control by other elements with the same Swiper set name, given above.
Go Back #
Set this type to the elements that when clicked on, the related carousels and sliders will go backward one step.
Go Forward #
Set this type to the elements that when clicked on, the related carousels and sliders will go forward one step.
Remote Control #
Set this type to the elements that when clicked on, or hovered, the related carousels and sliders will go to the appropriate slide.
You need one of these for each slide in your related carousel.
Example: you have an image carousel with 4 images. You would want at least 4 ‘Remote Control’ elements. The first element on the page set to ‘Remote Control’, will make the sliders go to slide 1. Element 2 set to ‘Remote Control’ will make the sliders go to slide 2, and so on.
And this even loops. Meaning, ‘Remote Control’ element 5, in the example just given, would make the sliders go to slide 1. ‘Remote Control’ 6 to slide 2, etc.
Lots of styling options are available for the default, hover and active states.
Hover #
Enable this if you want to change slide on hover instead of click of the element.
Remote URL Name #
Enter a name (without the ‘#’) if you would like to trigger this remote control from the URL.
Scroll Offset #
Offset from the top of the first related carousel / slider, when automatically sliding to it.
Remote Control List #
Same as ‘Remonte Control’, but here each ‘list item’ is it’s own remote control. Whenever possible, this is prefered, as it will keep the DOM lower.
Example: you have an image carousel with 4 images. You would want one element set as ‘Remote Control List’, and 4 List items set in that element.
Elementor natively compatibles elements: Icon List, Nav Menu, Price List.
Elementor addons compatible elements: several, from several addons. Most of them will be called ‘lists’ something or other.
Hover #
Enable this if you want to change slide on hover of the list items instead of click.
Remote URL Name
Enter a name (without the ‘#’) if you would like to trigger this remote control from the URL.
Scroll Offset #
Offset from the top of the first related carousel / slider, when automatically sliding to it. Compatible URLs are automatically generated, based on the text content found in the list items.
Learn more about automatically generated URLs for Carousel Control elements.
Remote Control From Far #
Set this type to any elements you would like to open and scroll to a specific slide. Useful to have a CTA in the hero, for example, link to a specific slide in a slider lower down on the page.
Target #
Enter a numerical value corresponding to the slide you want to slide & scroll to.
Example: enter ‘3’ to have the related carousels & sliders go to slide 3.
Scroll Offset #
Offset from the top of the first related carousel / slider, when automatically sliding to it.
Count #
Set a Heading element to ‘Count’ to have a live count of the currently active slide. Will show as a fraction (ie 3/4).
Write in the ‘Title’ field this ‘ <span>1</span> / 6 ‘, change the ‘6’ to your amount of slides. The ‘1’ will change itself.
Compatible with Elementor’s native ‘Heading’ element only.
Progress bar #
Set a Divider element to ‘Progress bar’ to show the progress of the related carousels and sliders in a visual way.
Compatible with Elementor’s native ‘Divider’ element only.
#
Set the opacity of the progress bar before it is filled. Set to 0 to not show it at all.
