UPDATED on June 29, 2018
Summary: Sliders provide a feature visually dynamic way to show a series of rotating images and/or text, without having to write html code from scratch. Once placed on a page, the slider becomes part of the page's content.
Sliders are highly effective when storytelling, showcasing a gallery of images, or presenting multiple images of similar ideas, products, people or places.
Note: this Help page address interior page sliders only. The slider on the LCC Homepage is only accessible by Level 10 Administrators.
Examples of Sliders
- Image Slider: See Class of 2018 page
- Image Slider: See Music Program page
- Content Slider: See Campus Buildings & Facilities page
- Content Slider: See Foundation page
Slider Types
Sliders are available in two types, image, or content.
Image Slider
Image Sliders feature a set of images that automatically rotate every 7 seconds. No variations to the timing are available. To stop the automatic rotation click on any slide. Once stopped, hover over the slider to access left and right arrows, then click arrow to manually advance forwards or backwards. The number of images in the slider is indicated by white dots at the bottom center of the slider. To resume auto-rotation a browser refresh is needed.
For optimal display all images within an image slider should be the same height and width in pixels. Recommended pixel dimensions are listed at Image Size Guide Help page. See section on 'Interior Page Image Slider'.
Content Slider
Content Sliders feature a set of content boxes that manually rotate on click. Content inside the slider can be configured with various layout options, including column layouts, link lists, etcetera. To advance to the next slider click 'Prev' or 'Next' button located at the top right of the slider. The number of content sliders is indicated by Grey dots at the bottom center of the slider.
For optimal display, all images within a content slider should be the same height and width in pixels. Recommended pixel dimensions are listed at Image Size Guide Help page. See section on 'Content Slider'.
Accessing Sliders
- Login to OU Campus and check out page.
- Click green edit button to enter editable region.
- Click 'Show Gadgets' icon at top right of page.
- Click 'Snippets' drop down to display available snippets. Sort by 'all', or by 'Sliders'.
- Select desired slider (image or content).
Inserting Sliders
- In edit mode, place your cursor on your page where you want to insert a slider.
- Click 'Show Gadgets' icon at top right of page.
- Click 'Snippets' drop down to display available snippets. Sort by 'all', or by 'Sliders'.
- Select desired slider (image or content).
- Dialog box showing layout for selected snippet will appear. Click 'insert'.
- Image Slider will be placed on your page.
- Replace placeholder content with your own content.
- Upload and place images in Image Slider
- Place layout options, images and/or text in Content Slider
- Save and submit for publish.
Add or Delete Sliders
Add a Slider
- Right click in the last row and select 'Row/Insert Row After'.
- A new slider row will be inserted. Add your own content.
Delete a Slider
- Right click in the slider row to be deleted and select 'Row/Delete Row'.
- Slider row will be deleted.
Example of Unmodified Image Slider
Example of Unmodified Content Slider