Basics 1B - Backgrounds and Buttons

This is a transparent 4-sided carousel that includes buttons for navigation. The transparent panels are useful for making the screen look bigger especially on mobile devices.

You can still swipe left or right on the title bar to turn the carousel, or you can use the buttons above.

Usage:

1. To create transparent panels, add a backgroundColor attribute with an rgba transparency value (e.g., 0.9) when you initialize your carousel.

   
   Panther.Carousel.init({
       id: 'carousel1',
       backgroundColor: 'rgba(209, 209, 209, 0.9)'
   });
                                   

2. To use buttons for turning the carousel, add your HTML and bind the events (e.g., onclick) to one of the turn methods (i.e., turnPrev and turnNext) referencing the carousel ID.

   
   <input type="button" value="First" onclick="Panther.Carousel.turnTo('carousel1', 1);">
   <input type="button" value="Prev" onclick="Panther.Carousel.turnPrev('carousel1');">
   <input type="button" value="Next" onclick="Panther.Carousel.turnNext('carousel1');">
   <input type="button" value="Last" onclick="Panther.Carousel.turnTo('carousel1', 4);">
                                   

   To turn to a specific side, you can use the turnTo method.