< Carousel 1 >

Basics 1A - Apply

This is a standard 4-sided carousel.

You can swipe left or right (or click-and-drag) on the title bar to turn the carousel.

Usage:

  1. Include the PantherUI.min.css file, and add your own CSS for the container to set the size and position.

    
<link rel="stylesheet" href="dist/PantherUI.min.css">
<style>
#container1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

  2. Add the following HTML markup for the container and carousel structure. To create a 4-sided carousel, use 4 figure elements. To add more sides, just add more figure blocks.

    
<section class="panther-Carousels">
    <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>
</section>

  3. Include the PantherUI.min.js file, and add your JavaScript to configure and initialize the carousel by element ID.

    
<script src="dist/PantherUI.min.js"></script>
<script>
// Initialize carousel
Panther.Carousel.init({
    id: 'carousel1'
});
</script>
< 2 >

Hello World!

< 3 >

The quick brown fox jumps over the lazy dog.

< 4 >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tempor ligula. Suspendisse ut porttitor ipsum, at viverra metus. Phasellus vitae dictum turpis, eu ultricies lacus. Vestibulum cursus pretium lectus ac accumsan. Ut fringilla vulputate nisl. Suspendisse porta nisi neque, vitae imperdiet ligula fringilla et. Aenean sagittis ante in lectus cursus, non sodales tortor pellentesque. Etiam lobortis quam eu nisi fermentum ultricies. Vestibulum viverra pulvinar enim. Cras commodo velit metus, non ultricies est rutrum sed. Phasellus gravida augue vel imperdiet mattis.