Specific slider opened
You can also set any other slider to be the default open slider instead by adding the open
attribute to that slider's tag and give it the value true
, like:
{slider title="This slider is now open by default!" open="true"}
Note: You do NOT need to give the first slider an open="false"
if you gave another slider open="true"
.
Random slider opened PRO
With the Pro version, you also have the ability to make a different slider open randomly every time the page is refreshed. This would allow to present different content when the page is revisited.
You can do so by placing an open="random"
parameter to the first slider in the set, like:
{slider title="First Slider" open="random"} ... {slider title="Second Slider"} ... {/sliders}
Try refreshing this page and see the opened slider in this set being random every time.
All sliders closed
By default the first slider in a slider set will be the open slider.
If you want to have all sliders closed, you can do this in 2 ways:
Either set the default First Slider
option in the system plugin settings to Closed
. Or give the first slider the attribute open
and give it the value false
, like:
{slider title="First slider" open="false"}
Independent sliders
You can make sliders independent by simply making each slider an own set. This method can be used for stuff like FAQ pages where you want to be able to have multiple sliders open at the same time.
Because the first slider in a set is opened by default, you should add the open="false"
attribute to every slider if you want them closed when the page displays.
If you have set up the page scrolling in the Sliders system plugin settings, you can add the scroll="false"
attribute to stop the page from scrolling to the sliders when you click to open them.
{slider title="Question 1" open="false" scroll="false"}
Answer 1...
{/sliders}
{slider title="Question 2" open="false" scroll="false"}
Answer 2...
{/sliders}
{slider title="Question 3" open="false" scroll="false"}
Answer 3...
{/sliders}
Open/close all sliders
If you want to open or close all the sliders on the page, you can use the available javascript functions openSliders
and closeSliders
.
You can make your own custom links or buttons to trigger these functions. Or call them via some custom javascript.
<button class="btn btn-success" onclick="openSliders()">+ openSliders</button> <button class="btn btn-danger" onclick="closeSliders()">- closeSliders</button>
You can also open or close specific sliders by using giving the html id of the slider to the function.
This can be an id of an individual slider, or the id of an element that contains multiple sliders you want to open / close.
<button onclick="openSliders('slider-cats')">
Open slider "Cats"
</button> <button onclick="closeSliders('section-animals')">
Close all sliders inside "section-animals"
</button>