< Carousel 1 >

Basics 2A - Apply

This is a responsive 2-carousel layout that is useful for listing content in a “menu” carousel and viewing content in a “main” carousel.

You can swipe left or right on the title bar to turn the respective carousel.

Usage:

  1. Add CSS with media query for portrait:

    
<style>
#container1 {
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
}

#container2 {
    top: 0;
    left: 60%;
    width: 40%;
    height: 100%;
}

@media (orientation: portrait) {
    #container1 {
        top: 0;
        left: 0;
        width: 100%;
        height: 60%;
    }

    #container2 {
        top: 60%;
        left: 0;
        width: 100%;
        height: 40%;
    }
}
</style>

  2. Add HTML structure for two carousels:

    
<section class="panther-Carousels">
    <!-- Carousel 1 -->
    <section id="container1" class="panther-Carousel-container">
        <div id="carousel1" class="panther-Carousel-carousel">
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; Carousel 1 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 1: Add your content here -->
                </div>
            </figure>
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; 2 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 2: Add your content here -->
                </div>
            </figure>
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; 3 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 3: Add your content here -->
                </div>
            </figure>
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; 4 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 4: Add your content here -->
                </div>
            </figure>
        </div>
    </section>

    <!-- Carousel 2 -->
    <section id="container2" class="panther-Carousel-container">
        <div id="carousel2" class="panther-Carousel-carousel">
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; Carousel 2 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 1: Add your content here -->
                </div>
            </figure>
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; 2 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 2: Add your content here -->
                </div>
            </figure>
            <figure>
                <div class="panther-Carousel-panelTitleBar"><span class="panther-Carousel-panelTitle">&lt; 3 &gt;</span></div>
                <div class="panther-Carousel-panelContent">
                    <!-- Panel 3: Add your content here -->
                </div>
            </figure>
        </div>
    </section>
</section>

  3. Bind events to control the first carousel using the turnTo method:

    
<input type="button" value="1" onclick="Panther.Carousel.turnTo('carousel1', 1);">
<input type="button" value="2" onclick="Panther.Carousel.turnTo('carousel1', 2);">
<input type="button" value="3" onclick="Panther.Carousel.turnTo('carousel1', 3);">
<input type="button" value="4" onclick="Panther.Carousel.turnTo('carousel1', 4);">

  4. Add JavaScript to initialize the carousels:

    
<script>
// Initialize carousels
Panther.Carousel.init({
    id: 'carousel1',
    backgroundColor: 'rgba(0, 152, 240, 0.9)' // blue
});

Panther.Carousel.init({
    id: 'carousel2',
    backgroundColor: 'rgba(150, 184, 0, 0.9)' // green
});
</script>
< 2 >
< 3 >
< 4 >
< Carousel 2 >

You can use the buttons below to control Carousel 1...

< 2 >

... or you can tap a list item to control Carousel 1:

  • Panel 1
  • Panel 2
  • Panel 3
  • Panel 4
< 3 >

Big Buck Bunny

Photos

  • Splash
  • Rodents
  • Evil Frank
  • Bow
  • Rinky
  • Trap

Videos

  • Trailer (480p)