Slider Maker

Set responsive options - Jssor Slider Tutorial

In this tutorial, we will make the slider resposive to fit various devices like desktop PC, mobile phone and tablet PC. And the slider will keep scaling while user resizing browser.

As you will embed this slider to your webpage, maybe in the 'body' or in a 'div' element which is the parent container of the slider.

The following responsive options target to make the slider fit 'Parent Container Width' and keep the width no more than 720px.


1. Create 'tutorial07.slider'.

Open tutorial06.slider, click File -> Save As menu to save it as tutorial07.slider to your workspace.


2. Set reponsive option.

Click Layout menu to open layout window.
Set Scale To property to Parent Container Width.
Set Max property to 720.



3. Confirm and close layout window.

In the layout window, click OK button.



4. Save your slider.

Click File -> Save menu to save your slider.



5. View your slider.

Click View menu to view your slider.
View example tutorial07.slider.