Start main page content

Sliding Feature Box

Description

A sliding feature box can be used anywhere on the page to display an image and a description such as news or promotional items. The sliding feature box will allow one to scroll horizontally to display all the items and then start with the first one again (wrap around). Thus it can perpetually scroll only in the right hand side direction. Each of the boxes are a link so that the user can go to a different section or content to view the details of what is being displayed in the box.

The vertical height of the sliding feature box is determined by the one that has the most amount of text. In the example about the first feature on the left most side has the most amount of text and as a result set the height of this sliding feature box.

Example

Two students in the library at Wits
International Students Everything you need to know about applying to Wits and studying in South Africa.
Wits Junction residence at night
Accommodation Whether you are new to university life or in your final years of study, we have a community for you.
Fees and Funding Information about University tuition fees and funding sources such as scholarships and financial assistance for undergraduate and postgraduate students.
Wits Kudu Mascots in front of Great Hall
Visit us? Or we can visit you. The Schools Liaison Office (SLO) arranges school visits and campus tours. SLO is the link between high school and university.
Young woman working on laptop
Wits Plus Short courses in a wide range of fields, from engineering and business management to health sciences and digital communications.
How to use it

Using the sliding feature box container requires the use of two types of content as explained further in the following subsections.

  1. Sliding Feature Box Container
  • Select Create content from the actions menu beside the section you wish to add content to. The following menu will popup listing all the content types that are available. The content types listed will depend on the level of access that you have been granted.
  • If the content type is not immediately visible, you can search for it by typing in words. Even typing in “slid” in the search window will bring up the following content type.

 

  • Click on the radio button next to the Sliding Feature Box Container.
  • Click on the Next button and the following window will become visible.

  • Enter a Name for the content and this is mandatory. This will not be displayed on the published page, but simply act as a name within SiteManager. In this example, the same name as the container type is used for ease of reference.
  • Click Save changes once completed.

 

2. 1x Sliding Feature Box

  • In the same section where you have created the Sliding Feature Box Container, click on Create new content and you will be presented with the following screen.

  • This time select the 1x Sliding Feature Box and click on Next. The following window will pop up.

  • When you enter a name for the content, the number is irrelevant. The order of appearance is purely based in the order in which the contents are listed.
  • Title will be the main title for this piece of content. This will appear in larger writing
  • Next to Image, click on Select media and choose an appropriate image for this feature box.
  • Enter a brief caption in the Description bearing in mind that the display area is limited for the feature box.
  • Add section link or Add a content link will allow you specify the location where more information can be found on this feature box.
  • Click Save changes to save the content once completed.

In this manner, you may add as many pieces of feature box containers and sort them accordingly. Please note that the ability to slide through the feature boxes will only become possible when the number of features exceeds the display width of the screen. For testing purposes, you can always narrow the width of your browser to see how the application responds.

Share