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 wit WYSIWYG Web Builder:
http://www.wysiwygwebbuilder.com/support/apple/
http://www.wysiwygwebbuilder.com/support/blackberry/
Step 2
To add new content to the current page, simply drag & drop objects within the Carousel area.
Download the demo projects:
http://www.wysiwygwebbuilder.com/support/carousel.zip

Full width demo project (requires version 9.2 or higher):
http://www.wysiwygwebbuilder.com/support/carousel/carousel_fullwidth.zip

Related tutorials:
http://www.wysiwygwebbuilder.com/carousel3d.html
http://www.wysiwygwebbuilder.com/carouselevents.html
Step 3
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:
http://www.wysiwygwebbuilder.com/support/carousel/index.html
Tip:
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.
6. Select ‘Event’: OnClick and set the ‘Action’ to JavaScript function.

To show the dialog enter this JavaScript:
$('#Carousel1').carousel('goto,1');
where Carousel1 is the ID of the Carousel.
goto,1 jumps to the first slide
goto,2 jumps to the second slide.
etc...

To show the next slide you can also use this JavaScript:
$('#Carousel1').carousel('next');
to show the previous slide use:
$('#Carousel1').carousel('prev');

The Carousel can also be started and stopped with events:
$('#Carousel1').carousel('start');
or
$('#Carousel1').carousel('stop');

Important note:
When the Carousel Mode is set to one of the effects then .carousel should be replaced with .carouseleffects !
For example:
$('#Carousel1').carousel('goto,1');
is then replaced by
$('#Carousel1').carouseleffects('goto,1');

Step 1
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!