Customizing Slider Component Settings – Sinorbis

This article describes one set of tools you can use to customize the design, appearance, and behaviour of a slider. You access these tools by clicking the Settings button on the Slider component toolbar.

To learn more about the Slider component, see Creating a Slider.

1 Opening the slider settings panel

Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

Hover your mouse pointer on the Homepage.
Click the Edit button. The Edit Content area opens.

Drag the Slider Component from the left panel onto the page below the header.

Hover the mouse pointer on the Slider component. The toolbar displays and shows the Settings button in the left corner.

Click the Settings button. The Slider settings panel displays. The panel has seven main sections. Each section is described below.

2 Setting the width

The Width feature adjusts the slider's display span. The Width tool first measures the full left-right span of the slider's display area. That span area can vary depending on many factors, including the display device (e.g. desktop or phone). Full span is called 100% width. Next, the Width tool changes the display span if you add a custom setting. Settings can range between 20% and 100%.

The image below shows how the Width tool can change the slider's display span. The image shows two sliders. They are the same except for the Width setting. The top slider width is set to 30%. The bottom slider width is set to 100%.

3 Setting the height

You can customize the height of a slider for three different display devices: desktop, tablet, and phone. On the Slider Settings panel, click the Height tab. A new panel displays. Use the plus (+) and minus (-) signs to change the height of the slider on each type of device.

4 Customising slides

You can customise several design features using the Slides tool. On the Slider Settings panel, click the Slides tab. A new panel displays.

Visible slide count in

Set the number of slides shown on a screen at one time; the minimum is one, and the maximum is six. The default is one slide. You can set a different number for each display device. The image below shows two slides visible at the same time on a desktop computer.

Space between slides

Set the amount of space between slides shown if you have more than one visible. The image below shows two slides visible at the same time on a desktop computer.

If you set visibility to one slide, the Space between slides tool can produce an interesting design effect: it pulls slider content away from the left-right rotation arrows. The two images below show the effect of changing Space between slides with one visible slide.

In the first image, the content area overlaps the rotation arrows. In this case, Space between slides was set to zero.
In the second image, the content area does not overlap the arrows. In this case, Space between slides was set to 135 px.

Border width

Set the width of the border around each slide. Use the plus (+) and minus (-) signs to change the thickness of the border. To remove a border, set the value to zero.

Border Type - Set the border type: solid, dashes, or dots.
Border Colour - Choose the colour of the border. Click the box to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.
Border Radius - Change the angle of the slider corners by setting the radius. Select zero for square corners. Increase the radius for rounded corners.

The image below shows rounded corners on a slider created with a radius of 15 px.

5 Editing slideshow settings

Click the Slideshow tab on the Slider settings panel. The panel opens with four options.

Autoplay - Check the Autoplay box to rotate images automatically. Uncheck the box if you want viewers to manually slide images by clicking arrows or dots.
Repeat - Check the Repeat box to rotate images continuously. Uncheck the box to display each image once and stop rotating at the last image.
Fade - Check the Fade box to set image transition to fade. Uncheck the box to set the default slide transition effect.
Transition Delay - Adjust image transition speed. The fastest transition speed is 0 milliseconds. The slowest transition speed is 9999 milliseconds.

6 Editing arrow settings

Click the Arrows tab on the Slider Settings panel. The Arrows panel opens with seven options.

The Slider component preset includes one arrow button on either side of the slider display. Users click an arrow to advance the slider forwards or backwards.

You can customise the appearance of the arrows inside the Arrow Settings panel.

Visible - Check the Visible box to make the arrows visible. Uncheck the box to remove the arrows from the display.
Arrow Color - Two separate boxes set the colour of the left and right arrows. Click a box to open a Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette for each arrow.
Arrow Size - Two separate settings control the size of the left and right arrows. Click the plus (+) or minus (-) boxes to increase or decrease the diameter of each arrow.
Arrow Position - Two separate settings control the position of the left and right arrows. Click the plus (+) or minus (-) boxes to increase or decrease the position of the arrow relative to the left or right side of the slider edge.

7 Editing dot settings

Click the Dots tab on the Slider settings panel. The panel opens with seven options. Dots display at the bottom of the slider. The number of dots shows the number of images in the rotation. The bold dot shows the current image’s place in the rotation. You can customise the appearance of the dots inside the Dots Settings panel.

Visible - Check the Visible box to make the dots visible. Uncheck the box to remove the dots from the display.
Color - Click the Dots Color box to open a Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette for each arrow.
Size - Click the plus (+) or minus (-) boxes to increase or decrease the diameter of the dots.
Dots Space - Click the plus (+) or minus (-) boxes to increase or decrease the distance between dots.
Alignment - Choose the dots’ display location: place the dots on the left side of the slider, in the middle, or on the right side.
Padding L-R - Click the plus (+) or minus (-) boxes to increase or decrease the spacing between the dots and the left or right side of the slider display.
Padding T-B - Click the plus (+) or minus (-) boxes to increase or decrease the spacing between the dots and the bottom of the slider display.

8 Editing Advanced settings

Click the Advanced tab on the Slider settings panel. The Advanced settings panel opens with three options.

ID or Class Name - To learn about custom styling with ID and Class Name selectors, see Adding CSS.
Component Visibility - Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility settings, see Customising Visibility.