What is the Carousel component?
The Carousel component rotates through a maximum of seven (7) Media Manager objects. Each object advances automatically but users can advance through the images manually by clicking the arrows placed on the right and left side of each image. On mobile devices, users can scroll through images by swiping the screen. The image and title text click through to the full video or object.
This section demonstrates how to add Media Manager objects, however, external objects can be added by manually typing the full URL path to the object and image. Find the prefix for your site in the Site Settings section of the Bento console.
How to implement the Carousel
- In a block of the content section of your website (not the header or footer), click the plus sign to add a component and click custom components (Figure 1).
- Click the default component to bring up the list of available components (Figure 2).
- Click the component dropdown menu and click Explorer Carousel (Figure 3).
- Initially, empty slots for three of the seven items you can add appear. Click the blue Choose button next to Search the Media Manager library to browse and select your first carousel item (Figure 4).
If you do not see objects surface, the Media Manager integration may not have been added when your site was set up. To check, go to the Site Settings page on your site and in the Integrations section, be sure you have a Media Manager Account API ID and secret assigned. If you do not, file a support ticket and request one.
- To search for a specific object or video, type search criteria into the textbox at the top and click Search (Figure 5.1).
- Click the Object Type dropdown menu to select a video or web object and click the Start and End date textboxes to search by specific dates (Figure 5.2).
- A list of possible matches surface. Next to the selection you want, click the radio button to the left of the search result title (Figure 5.3).
- When finished, click Add selected to add the item to your carousel (Figure 5.4).
- The fields are populated with information from the video or web object. All fields must be populated with text. If a field is not populated and you have nothing you want to add to it, put your cursor in the empty textbox and press the space key on your keyboard (This is a workaround while the custom component is being redesigned).
- Follow the same steps as in Figures 3 and 4 to add more items. If you wish to add more than three items, click Add another item (Max 7) located near the bottom of the component (Figure 6.1)
- When finished, click Save (Figure 6.2).
- All images manually imported (ie: not imported automatically from Media Manager) must have a 16x9 ratio with a minimum width of 640 pixels. Carousel images will display incorrectly if any other ratio is used.
- All text fields can be edited, however, editing the Image and URL fields can result in an error if the path is not absolutely correct. Be very careful when modifying all fields, but those in particular.
- Click Save to save your page and click Preview to view the Carousel in a browser (Figure 7).
- Your Explorer Carousel appears on the page (Figure 8). The user can click the left and right-facing arrows on the carousel image to scroll through each image. They can also click the image or the title to view the page content.
How to change a carousel item
After you have added your Explorer Carousel items you may decide that you want to change one or all of them. No problem!
- Click the blue Choose button in the object you want to change (Figure 1). Select another item as you would when you first added your original carousel items.
How to rearrange items
Once you've added your carousel items, they can be reordered at any time.
- If your items are not condensed, begin by click the upward-facing arrow to contract each section (Figure 1). When the section is contracted, the arrow displays facing downward. This will make it easier to move items around.
- On the left side of each object, click the grey patterned box and drag the object to the place you want it to appear in the list. When it is in place, release your mouse (Figure 2).
- When an item is placed in its new location, the label changes automatically to reflect its new position (i.e.: Item 1 becomes Item 3).
How to delete an item
- To delete an item from your carousel, click Remove item located at the bottom of the object you want to remove (Figure 1).
Once you delete an object it cannot be recovered. You must manually add it again.
- A popup box appears asking you to confirm the deletion. Click Confirm (Figure 2).
- The item is removed and must be manually added back in if you want to include it again in your carousel.