How to use the Carousel?
Here's a short introduction to the Carousel object. Yet another powerful feature of WYSIWYG Web Builder!
The Carousel displays images and other objects by scrolling or animating the content. Users can step to any specific panel on demand using the pagination icons or browse the Carousel sequentially by using the back/next buttons. You can also think of the Carousel as a multiple layer slide show. This is a very effective method to increase the web site usability and engage the user. You probably have seen this effect on many popular websites, such as Apple or Blackberry.
Examples created with WYSIWYG Web Builder:
To add new content to the current page, simply drag & drop objects within the Carousel area.
To add objects to another page, first go to the page (either by using the pagination controls or next/back) and then drag & drop the object to that page.
Full Width Mode (available in WWB 9.2 and newer)
Many modern websites use a fancy animation to switch between pages without actually loading a different page. The Carousel object is perfect to implement this functionality! Each page in the Carousel will represent a page in your website and the user can navigate through the pages with a menu or events.
To make this possible you need to set the Carousel to 'Full Width Mode' so it will cover the entire width of the page.
You can view an example here:
The objects that you drag onto the Carousel should be smaller than the size of the Carousel itself otherwise they will not fit into the ‘drop container’ and will not become part of the Carousel! So if the object that you want to add to the Carousel is larger than the Carousel then first increase the size.
How to control the slides with events?
You can use the Slideshow Next and Slideshow Previous actions in Events to create external navigation for the Carousel.
It's also possible to directly jump to a specific page:
1. Add the Carousel object to your page.
2. Take note of the ID. The default value is ‘Carousel1'’.
3. Add an image, shape or other object with event support to the page.
4. Open the properties and select the ‘Events’ tab.
5. Click ‘Add’ to insert a new event.
where Carousel1 is the ID of the Carousel.
goto,1 jumps to the first slide
goto,2 jumps to the second slide.
to show the previous slide use:
The Carousel can also be started and stopped with events:
When the Carousel Mode is set to one of the effects then .carousel should be replaced with .carouseleffects !
is then replaced by
if the Carousel is set to 'flexible' then use
Drag the Carousel object to the page. You will see a blank area with two buttons and a pagination control.
The buttons can be used to go to the next or previous panel. The pagination control displays a 'dot' for each page in the Carousel. You can directly jump to a specific page by clicking the dot. The colors and size of the pagination control is configurable and of course you can select your own images for the next/back buttons as well. Advanced users can even use events to create custom buttons outside of the Carousel!