bootstrap-carousel

Bootstrap-carousel is a wrapper of the Carousel plugin from Bootstrap. The plugin main object is to reduce the typing from creating a new Carousel while automating some tasks.

About the plugin

Plugin developed in the book Bootstrap by Example Copyright 2016 PACKT Publishing.

Acquire the book and learn how to create this plugin from scratch and much more Bootstrap examples:

• Create a Landing Page
• Building a Web Application just like Twitter
• Full Dashboard
• Hands-on the Bootstrap 4!

See more about the Book at Bootstrap by Example oficial website or at Amazon.

You can also make a donation. Thanks for supporting us! :smile:

Usage

Load the plugin:

    <script src="js/bootstrap-carousel.js"></script>

Create this HTML:

    <div id="carousel-notification" class="bootstrap-carousel">
        <img src="imgs/doge.jpg" data-title="doge" data-content="Hey there!">
        <img src="imgs/laika.jpg" data-title="laika" data-content="Hey ...!">
        <img src="imgs/cat.jpg" data-title="cat">
    </div>

Start the plugin via JavaScript:

    $('#carousel-notification').bCarousel();

Or if you add the class .bootstrap-carousel to the outmost element the plugin will automatically load.

For each image inside the .bootstrap-carousel provide:

• A data-title for the caption title
• A data-content for the caption content

The result is a Carousel, just like the one of Bootstrap:

OBS: Just like for the Bootstrap original Carousel, you must provide an id for the outmost element, in this example above, we used #carousel-notification.

Options

The options can be passed through JavaScript plugin initialization or data attributes:

Methods

• .bCarousel('load'): Reload the carousel.
• .bCarousel('addSlide', 'imgSrc', 'imgTitle', 'imgContent'): Add a new slide to the carousel. imgSrc correspond to the image source; imgTitle is the caption title; and imgContent is the caption content.