Experiencing an issue?

Customizing Slider Component Settings

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:

 

 

1  Opening the slider settings panel

  1. Click WEBSITE on the top menu bar. 
  2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
  3. Hover your mouse pointer on the Homepage.
  4. Click the Edit button. The Edit Content area opens.
  5. Drag the Slider Component from the left panel on to the page below the header.
  6. Hover the mouse pointer on the Slider component. The toolbar displays and shows the Settings button in the left corner.

slider-1.png

 

  1. Click the Settings button. The Slider Settings panel displays. 

 slider-2.png 

 The Slider Settings 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 added a custom setting. Settings can range between 20% and 100%.

 

width-3.png

 

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

 

wide-2b.png

 

3  Setting the height

You can customize the height of a slider for three different display devices: desktop, tablet, and phone.

  1. On the Slider Settings panel, click the Height tab. A new panel displays.
  2. Use the plus (+) and minus (-) signs to change the height of the slider on each type of device.

height-1b.png

 

4  Customising slides

You can customise several design features using the Slides tool.

  1. On the Slider Settings panel, click the Slides tab. A new panel displays.

 

slide-count-1.png

 

Visible slide count in 

Set the number of slides shown on a screen at one time; the minimum is 1 and the maximum is 6. The default is 1 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.

slide-count-2.png

 

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.

spacer-1a.png

 

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.

 

arrow-1.png

arrow-2a.png

 

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.

corner-1.png

 

 

5  Editing slideshow settings

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

slideshow-1.png

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.

 

arrow-3.png

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 Dots 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.

 

dots-1.png

Visible

Check the Visible box to make the dots visible. Uncheck the box to remove the dots from the display.

 

Dots 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.

 

Dots 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:

Component Visibility

Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility settings, see:

 

advanced-1.png 

 

 

 

Related articles