The Jumbotron Slider uses an horizontal transition effect between slides.

Jumbotron Carousel
Tips
- Slider Components READ ME FIRST Learn More
- Page specific components Learn More
Instructions
Jumbotron Carousel
In this tutorial, we’ll demonstrate how to update the Jumbotron Carousel layout. The Jumbotron Carousel ‘slides’ a series of div containers, from right to left. The default Jumbotron includes 3 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and an image.
We’ll learn how to:
- change the heading text
- change the paragraph text
- change or remove the button link
- replace or remove the image
- add and remove slides
Video Demonstration ( skip the reading, just watch and learn! )
Change the headline text
- Expand the Library sliders >> jumbotron-carousel (folder).
- Double click on the “jumbotron-carousel” page to open.
- The H1 headline text is noted in the page by the description of ( Slider 1 Headline, etc )
- Click on the text with your mouse.
- Click on the H1 tag located on the Quick Tag Selector Toolbar.
- With the entire H1 tag selected, type a new headline:
- Save to update.
Change the paragraph text
This is regular text on the page, just change as you would normally change the text on a page.
Change or remove the button link
- To remove the button, select with your mouse, and delete.
- To change, right click with your mouse, and select Hyperlink Properties.
- Change the ‘Text to display:’ at the top to change the button name.
- Scroll through your pages to link to a new page, or type the name of the page manually.
- Click OK to save.
Replace or remove the image
- Expand the Library >> sliders >> jumbotron-carousel (folder).
- Import, drag or copy your replacement image into the ‘images’ folder, ( or any folder within your website )
- Open the ‘jumbotron-carousel’ Library page.
- Locate the image you want to change.
- Double click to open the Picture Properties window.
- Click the Browse button.
- Browse to your Library >> sliders >> jumbotron-carousel >> images (folder).
- Select the imported image.
- Click the Open button.
- Then click OK.
- You should see your new image on your page.
- As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.
- This time, click the Appearance Tab.
- Unselect the ‘Specify size’ option.
- Then click OK.
- This will remove any width and height properties, allowing the image to scale on mobile devices.
Add and remove slides
- Expand the Library >> sliders >> jumbotron-carousel (folder).
- Open the ‘jumbotron-carousel’ Library page.
- Switch to ‘Code’ view.
- To remove a slide, select the entire commented tag, and delete.
- To add more slides, copy an existing slide including the comment tags
- Then paste above or below, pasting once for each new Slide you would like to add.
- You’ll now have a duplicate slide. Just change the content and images to suit your needs.
Jumbotron Carousel
In this tutorial, we’ll demonstrate how to update the Jumbotron Carousel layout. The Jumbotron Carousel ‘slides’ a series of div containers, from right to left. The default Jumbotron includes 3 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and an image.
We’ll learn how to:
- change the heading text
- change the paragraph text
- change or remove the button link
- replace or remove the image
- add and remove slides
Change the headline text
Video Demonstration ( skip the reading, just watch and learn! )
- Expand the Library sliders >> jumbotron-carousel (folder).
- Double click on the “jumbotron-carousel” page to open.
- The H1 headline text is noted in the page by the description of ( Slider 1 Headline, etc )
- Click on the text with your mouse.
- Type your new headline.
- With the entire H1 tag selected, type a new headline:
- If you ‘loose’ the <h1> formatting as in the example below
- Place your cursor to the left of the text, and press the enter key to move it to a new line ( if it’s not on it’s own line like the example above )
- Select the text with your mouse, and re-apply the <H1> tag using the ‘Format’ menu >> Heading 1
Change the paragraph text
This is regular text on the page, just change as you would normally change the text on a page.
Change or remove the button link
- To remove the button, select with your mouse, and delete.
- To change the link, just select with your mouse.
- With the blue button text selected, click the ‘Point to File’ tool in the Properties Panel ( Ctrl+F3 ).
- And drag your mouse over to the page you want to link to.
- Click OK to save.
Replace or remove the image
Video Demonstration ( skip the reading, just watch and learn! )
- Expand the Library >> sliders >> jumbotron-carousel (folder).
- Import, drag or copy your replacement image into the ‘images’ folder, ( or any folder within your website )
- Open the ‘jumbotron-carousel’ Library page.
- Locate the image you want to change.
- Double click to open the Select Image Source window.
- If you dropped your replacement image into the ( Library / sliders / jumbotron-carousel / images ) folder, you should see your replacement image.
- Select your replacement image, and click the OK button.
- You should see your new image on your page.
Add and remove slides
Video Demonstration ( skip the reading, just watch and learn! )
- Expand the Library >> sliders >> jumbotron-carousel (folder).
- Open the ‘jumbotron-carousel’ Library page.
- Switch to ‘Code’ view.
- To remove a slide, select the entire commented tag, and delete.
- To add more slides, copy an existing slide including the comment tags
- Then paste above or below, pasting once for each new Slide you would like to add.
- You’ll now have a duplicate slide. Just change the content and images to suit your needs.