Splitted Sliders for better Readability

Many of our customers asked us what the best way would be to show Content on smaller devices where the content and the Media is splitted vertically.

The Trick is very simple.  Create two ( as best with 1:1 Aspect Ratio Sliders).  In our example we called them twoboxexample_a and twoboxexample_b . Add the same amount of Slides and same settings to both slider (no shadow etc..)

However for twoboxexample_b please make sure you set following options:

• Turn off Navigaiton (Set Bullets to None and set Arrows to None)
• Set the Loop and Progress to “Stop Slider” and Stop after Loops to “0” and Stop at Slide to “1”

Now please add following Content to your page:

This will add the two Slider in your page.  To float them and to clear float on smaller devices you will need to add some Styles to your existing stylesheet like:

You can of course change the max-width to i.e. 768 for Tablets, or 480 for Mobile Portrait.

The Sliders are now available and the left Slider is even nicely rotating. Now you will need to make sure that the second slider (b) following the rotation of your Left Slider.  Please add this js to your First (twoboxexample_a) slider Custom JS Field:

Dont forget to change the revapi1 and revapi2 after your needs (you can copy the referencing revapi from the API Section of the Slider Settings also  !

In case you need to follow the exact change of the slider, and you even have bullets, navigation arrows etc. you will need to make sure that you swap to the right slide in Slider B like this:

For more reference you can follow our guide about 9x Sync Slider also:

https://www.themepunch.com/faq/9x-slider-synchronous-grid-slider/