Census Carousel
The Census Carousel Component allows the content author to present content in a navigable carousel. It allows you to a display a selection of rotating images with a title, brief description and link to an associated story, event, program, or page elsewhere in the site. Component has a minimum of 3 items and a maximum of 5 items.
Examples by Template
When to Use
Use a Census Carousel component when you have a set of featured content (pages with images or videos) that you want to display. The Carousel component can be placed on any page in the site.
Usage
The Carousel Component presents content in a navigable carousel, with a minimum of 3 items and a maximum of 5 items.
The component displays a series of sliding images, one at a time, in an order the author specifies. Selectable controls also let visitors cycle through the displayed pages on demand.
Carousel Title
Enter a description here.
Configure Dialog
The configure dialog allows the content author to add and rearrange slides. Expand the sections below to learn more about the Carousel's dialog box.
Tab: General
The General tab provides the option to customize the following fields of the Carousel component:
- Title – If you'd like to add a Section Title, insert it here.
- Title Size – Size of the title text. (H2 default)
- Title Alignment – Overrides the default alignment of the title text.
- Description – If you'd like to add a description, insert it here.
- Description Alignment – Overrides the default alignment of the description text.
- View All Page to Link to – Path to AEM page to link to.
- View All Text – View All text (optional, defaults to 'View All')
Tab: Carousel Items
Use the Add button to choose a page to add as a tab in the Carousel.
Once added, an entry is added to the list, which contains the following fields:
- Add – Click 'Add field' to add a new carousel item.
- Page – Insert the URL to the AEM page the component will link to.
- Title – The title to show. Will override AEM Page if selected.
- Teaser – The description or teaser text for this particular carousel item. Will override AEM Page if selected.
- Label – The banner label to show (1-Item Carousel only, will not show if video is added).
- Manual Tag – The banner tag to show (1-Item Carousel only).
- Call-to-Action Text – The call-to-action text to display. Defaults to "View More" is not authored. (Not Applicable to 1-Feature View)
- Image – The image to associate with this item. Will display in the background of the Carousel Item and override video and AEM page image.
- Alt Text – The alternative text to use for the image.
- Image is decorative – If decorative is checked the resource/image will not be printed or screenreader will bypass the reading.
- Enter YouTube ID – The YouTube ID is the collection of letters and numbers that appears in the url after watch?v= when viewing a YouTube video. Will override manual image and AEM page image.
Developer Resources
Expand the sections below to see the Census Carousel Component's HTML and JS output.
// CAROUSEL
var photoObjectArray = [
{
image: 'https://picsum.photos/1000/200/?random',
title: 'NAICS Code Lookup',
desc: 'Look up a NAICS code by keyword or industry',
button: 'Naics Lookup'
},
{
image: 'https://picsum.photos/1100/400/?random',
title: 'Quick Facts',
desc: 'Look up a Quick facts by keyword ',
button: 'Quick Facts'
},
{
image: 'https://picsum.photos/1200/500/?random',
title: 'American Fact Finder',
desc: 'Learn About up a American Fact Finder ',
button: 'Americn FactFinder'
},
{
image: 'https://picsum.photos/100/400/?random',
title: 'Population Clock',
desc: 'The population clock of the world',
button: 'Population Clock'
},
{
image: 'https://picsum.photos/1000/700/?random',
title: 'Census Business Builder',
desc: 'Census Business Builder Page',
button: 'Business Builder'
}
];
// CAROUSEL BUTTONS
var currentObject = photoObjectArray[0];
var currentObjectIndex = 0;
$('.uscb-next-spec').click(function () {
if (currentObjectIndex === photoObjectArray.length - 1) {
currentObjectIndex = 0;
} else {
++currentObjectIndex;
}
currentObject = photoObjectArray[currentObjectIndex];
$('#uscb-carousel-img-spec').attr('src', currentObject.image);
$('#uscb-carousel-img-spec').attr('alt', currentObject.desc);
$(".uscb-spec-header").text(currentObject.title);
$('.uscb-spec-desc').text(currentObject.desc);
$('.uscb-spec-button').text(currentObject.button);
// remove active class
$('.uscb-carousel-spec-mini').each(function (index, element) {
$(element).removeClass('uscb-active-carousel-special');
})
$($(".uscb-carousel-spec-mini")[currentObjectIndex]).addClass('uscb-active-carousel-special');
// dots used on special container mobile
// remove active class
$('.uscb-dot-spec').each(function (index, element) {
$(element).removeClass('uscb-active-carousel');
})
$($(".uscb-dot-spec")[currentObjectIndex]).addClass('uscb-active-carousel');
});
$(".uscb-prev-spec").click(function () {
if (currentObjectIndex <= 0) {
currentObjectIndex = photoObjectArray.length - 1;
} else {
currentObjectIndex--;
}
currentObject = photoObjectArray[currentObjectIndex];
$('#uscb-carousel-img-spec').attr('src', currentObject.image);
$('#uscb-carousel-img-spec').attr('alt', currentObject.desc);
$(".uscb-spec-header").text(currentObject.title);
$('.uscb-spec-desc').text(currentObject.desc);
$('.uscb-spec-button').text(currentObject.button);
// remove active class
$('.uscb-carousel-spec-mini').each(function (index, element) {
$(element).removeClass('uscb-active-carousel-special');
})
$($(".uscb-carousel-spec-mini")[currentObjectIndex]).addClass('uscb-active-carousel-special');
// dots used on special container
// remove active class
$('.uscb-dot-spec').each(function (index, element) {
$(element).removeClass('uscb-active-carousel');
})
$($(".uscb-dot-spec")[currentObjectIndex]).addClass('uscb-active-carousel');
});
$(document).ready(function () {
$($(".uscb-dot-spec")[currentObjectIndex]).addClass('uscb-active-carousel');
$('#uscb-carousel-img-spec').attr('src', currentObject.image);
$('#uscb-carousel-img-spec').attr('alt', currentObject.desc);
$($(".uscb-carousel-spec-mini")[currentObjectIndex]).addClass('uscb-active-carousel-special');
})
// Create the preview below carousel
$.each(photoObjectArray, function (index, value) {
$('.uscb-dot-container-special').append('<div class="uscb-layout-column uscb-carousel-spec-mini "> <img class="uscb-flex-col-55" src="' + value.image + '" alt=""/> <div class="uscb-flex-col-45 uscb-layout-row uscb-layout-align-center-center"> <p class="uscb-title-3">' + value.title + '</p></div> </div>');
});
// Create the small dots below carousel
$.each(photoObjectArray, function (index, value) {
$('.uscb-dot-container-spec').append('<span class="uscb-dot-spec" ></span>');
});
Yes
No
255 characters maximum reached
Comments or suggestions?
