The Split Screen Carousel Widget displays an image Carousel with an option for either a full-width image carousel or a side-by-side display featuring text in one column and an image carousel in the opposite column. Both the text block and the image will cycle new content when the carousel changes slides.
You can choose the width of the two columns by selecting options such as 50%, 50% or one larger than the other - 60%, 40% . Widths can be customized by adding new styles to the stylesheet and then adding a new width percentage for selection from the the select list.
The widget also has a number of other options such as:
-
Display the next/prev navigation arrows.
-
Display pager icons visually indicating which slide is showing.
-
Automatically start carousel cycling from slide-to-slide when the page loads.
-
Adjust display height based upon the slide height.
-
Loop indefinitely.
-
Associate a link to each slide or display either link text or a button.
This widget adds visual interest to your site and also provides a means of drawing attention to important messages or content. With the ability to cycle both slides and text, you can display a large amount of differing content within the same space.
For developers, the render handler can be modified to add additional functionality or to customize the carousel to your particular needs. Additional options can be added as well by adding them to the carousel’s metadata form and styles can be changed by updating the style sheet provided with the widget.
The Split Screen Carousel Widget offers the following configurable properties via the Custom Metadata Form bound to the Split Screen Render Handler.
Carousel Properties (tab)
- Slide Wait Time - If 0, users will have to manually navigate the slides. Otherwise this is the time in milliseconds that slides display before they automatically transition to the next slide.
- Slide Transition Speed - The time in milliseconds, for one slide to transition to the next slide.
- Slide Transition Effect - The effect to use when transitioning the slides. Possible positions are: Slide, Fade, Coverflow
- Options -
- Show Next/Prev arrows - If enabled, next and previous navigational arrows will be displayed to manually navigate between slides.
- Play in infinite loop - If enabled, users can navigate from the last slide to the first slide, or first slide to the last slide, directly.
- Adjust slide height automatically - If enabled, and only when the device size is small enough to have the Slide text, subtitle and/or buttons appear below the slide image, the height of the slide will automatically adjust, base on how much text is displayed, as the user navigates.
- Show navigation dots - If enabled, a series of dots will be displayed at the bottom of the slide, highlighting the current slide and allowing the user to quickly navigate to any slide by clicking the dots.
- Show thumbnail navigation - If enabled, thumbnails of the slides are shown below the current carousel image, allowing users to see and navigate to previous and next slide(slide). The current slide is centered.
- Keep image fixed height - If enable the slide image will be a fixed height (controlled in the CSS) based on the size of the device. Otherwise the image will be scaled proportionally, were the height of the image is a ratio to the screen width (also controlled in the CSS).
- Pagination Style - Options are: none, bullets, fraction or progress bar.
General Properties (tab)
- Element - Offers the option to set a Background Color and set the Padding for the text . The padding allows for positioning of the text. Padding options display when the units option is not 'none'. Choose a unit of measure type and then set the top, right, bottom, left values.
Link/Button Properties (tab)
- Link/Button Location: options are under slides, under text or middle of display.
- Link/Button Text: The text you want for the buttom or link.
The rest of this tab uses the standard options available for links and buttons. See a detailed explanation of the Link/Button Properties tab here.
Each slide added to the carousel has a number of configurable options allowing you to intermix a variety of different display formats within a single carousel. For example, one slide might have the text on the left and the image on the right and another slide might have an image on the left and the text on the right.
The Split Screen Carousel offers the following configurable properties on a slide-by-slide basis:
Slide Layout Properties (tab)
-
Slide Layout - The layout of the slide. One of the following options:
-
50% / 50%
-
60% / 40%
-
40% / 60%
-
100% with image
-
100% without image
-
-
Slide Background Color - The background color of the textblock area of the slide.
Slide Image Properties (tab)
-
Slide Image - The image to use in the slide.
-
Image Location - The side the image will appear on, unless 100% width layout.
-
Image Size - One of the following options:
-
Auto - Will keep the original size of the image and possibly just show a portion of it.
-
Cover - Will scale the image so that it's smallest dimension fits within the area. Use the 'Image Focal Point' property to control what portion of the image shows.
-
Contain - Will fit both dimensions of the image within the area. Meaning that the image will not take up the whole area, but all of the image will be shown.
-
-
Image Focal Point - When the 'Cover' option is selected, controls how the image is positioned in the slide controlling what part of the image is displayed. Default is center.
Slide Text Properties (tab)
-
Slide Text - The textblock to be displayed.
-
Text Position - The position/alignment of the overall textblock. Most useful when 100% width is selected.
-
Text Color - The default color of the text. The color can be overridden within the text editor.
Slide Link/Button Properties (tab)
-
Link URL - The target URL to navigate the user to when the click the slide title or link/button.
-
Link/Button Text - The text to display in the link/button.
-
Link/Button Style - The style of the link/button. Controlled by a CSS class. Defaults to standard Bootstrap button classes. Developers can override and define your own styles if needed.
-
Link/Button Size - The size of the link/button. Controlled by a CSS class. Defaults to standard Bootstrap button classes. Developers can override and define your own styles if needed.
-
Link/Button Alignment - The alignment of the link/button. One of the following:
-
Left, Center, Right - Link/button is positioned inline after the textblock.
-
Middle Center - Link/button is positioned in the middle of the image.
-
Bottom Left, Bottom Center, Bottom Right - Link/button is positioned on the bottom of the slide.
-
Each slide in the Split Screen Carousel is a separate custom element record. You can use the Custom Element's 'Render Properties' dialog to either dynamically filter, or manually select the slides.
The Split Screen Carousel Widget has the following downloadable components:
- Global Custom Element
- Metadata Form
- Generic Render Handler
Because this carousel’s render handler is written as a “generic" Render Handler you can either use the provided Custom Element , or use your own existing Custom Element on your site instead.
If you want to use the provided global Custom Element, do the following:
- Download & Import the Metadata Form
- Download & Import the Global Custom Element
- Confirm the Metadata Form is bound to the Render Handler
If you plan on using your own custom element, do the following:
- Download & Import the Metadata Form
- Download & Import the Render Handler
- Confirm the Metadata Form is bound to the Render Handler
- Map your Custom Element fields to the Generic Render Handler
For detailed information on how to import the various components, please see Importing Widgets.