[et_pb_ca_fullwidth_banner scroll_bar_text=”Learn More” scroll_bar_icon=”%%179%%” _builder_version=”4.21.0″ background_pattern_color=”rgba(0,0,0,0.2)” background_mask_color=”#ffffff” text_shadow_horizontal_length=”text_shadow_style,%91object Object%93″ text_shadow_horizontal_length_tablet=”0px” text_shadow_vertical_length=”text_shadow_style,%91object Object%93″ text_shadow_vertical_length_tablet=”0px” text_shadow_blur_strength=”text_shadow_style,%91object Object%93″ text_shadow_blur_strength_tablet=”1px” module_text_shadow_horizontal_length=”module_text_shadow_style,%91object Object%93″ module_text_shadow_horizontal_length_tablet=”0px” module_text_shadow_vertical_length=”module_text_shadow_style,%91object Object%93″ module_text_shadow_vertical_length_tablet=”0px” module_text_shadow_blur_strength=”module_text_shadow_style,%91object Object%93″ module_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” disabled=”on” disabled_on=”on|on|on” vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″][et_pb_ca_fullwidth_banner_item display_banner_info=”on” heading=”Carousels and Slideshows” button_text=”This area is also a button to link to where ever you choose.” button_link=”#” background_image=”https://caweb.cdt.ca.gov/wp-content/uploads/sites/221/2016/08/FogHorns-1920.jpg”][/et_pb_ca_fullwidth_banner_item][et_pb_ca_fullwidth_banner_item display_banner_info=”on” heading=”You can add as many slides as you want” background_image=”https://caweb.cdt.ca.gov/wp-content/uploads/sites/221/2016/07/sample_background_2.jpg” button_text=”You can omit this text area completely” button_link=”#”][/et_pb_ca_fullwidth_banner_item][et_pb_ca_fullwidth_banner_item display_banner_info=”off” button_link=”http://” background_image=”https://caweb.cdt.ca.gov/wp-content/uploads/sites/221/2016/07/sample_background_3.jpg” /][/et_pb_ca_fullwidth_banner]

Carousels and Slideshows

The Header Slide Show feature is no longer supported.  Carousels are supported for version 5.5 but will no longer be supported as part of 6.x or the Design System.

Header Slideshow Banner

The header slideshow banner (above) is a module that allows you to display a full page image, and provide a heading text and sub text on a button. You can link the button to where ever you like.

Content Carousel

A content carousel component provides a solution for placing text or other content bove an image. With responsive and dynamic content in mind , there is two element configurations for setting the height of the slide. One which fits to the content, and one which fits to the image.Our recommendation is use the content fit when you have a large amount of text, descriptive content, etc. Note: that in this case your background image should be a generic pattern or design.On the other hand you should use the image fit when you have only a single line or so of text, a simple header or button, html5 video or any content which would take up less space than your image or video.For any content carousel item, you can also apply the class of backdrop which will apply a slight opaque grey background to the content. This is useful when your images do not have enough contrast with your text.

Content Carousel (content fit)

To create a content fit, we use a background-image on the outermost element of our item. One could of course not set the background-image and the carousel item will still fit the content, but you will have to be aware of issues between the carousel container’s background color and your content.

Content Carousel (image fit)

To create an image fit, we use an image element contained within our item. If the image element is missing the item will simply fallback to being a content fit item. Warn: if the image url is broken or pointing to the wrong location, the element will have 0 height.


On any page with this message displayed you can click the button to view this page in the Version 4 format.