The standard CP5 Spotlight Element is designed to display four to five articles, depending on the layout of your site. If you are interested in displaying more articles in the Spotlight Element, turning it into a scrolling carousel might interest you. You can see some examples of what the scrolling Spotlight Element looks like in action at The Daily O'Collegian and The Daily Athenaeum.

All of the code you need to implement these changes can be downloaded by click on the link to the right. This tutorial is aimed at advanced users who are comfortable with implementing JavaScript and CSS. If you're lost or unsure about how to make these changes yourself, please contact our Support Team and we can assist.

STEP 1: Upload the CSS

Under your site's Stylesheets tab either open your main Stylesheet, or create a new stylesheet named "Carousel Styles" or something similar. Paste the contents of the "carousel.css" file into the stylesheet. Under the Files tab in your Stylesheet, upload the two images (next-horizontal.png and prev-horizontal.png) and press Save.

The basic carousle CSS provided will result in a Spotlight Element that looks like what is displayed on The Daily O'Collegian's web site. If you would like to change out the arrow images, you can do so. The widths in the carousel.css are assigned based on a two column layout. If you are using a three column layout, or plan to use the Spotlight element in a Column Splitter, you will need to adjust the widths in the CSS.

STEP 2: Upload the JavaScript call

The main JavaScript for this element is already incorporated into your site in our global files. So all you need to do is paste in the JavaScript call provided in carousel.js. To do this go to the Header/Footer section of your web site and create a new HTML element in the Header section. Paste in the code from carousel.js and press Save. You can modify the number of articles that get shifted when the user clicks the previous/next arrows by changing the value "scroll: 4" to a different number.

Please note: Placing the carousel script in your site's main Home tab will make every Spotlight Element on your site a scrolling carousel. If you only want the script to apply to certain sections, you can upload the script in one of your Sub Pages. If you only want the Scrolling Spotlight on your homepage, you will need to override the contents of your Header section on the sub pages by placing an HTML element in that slot.