Simple BBC Style Content Carousel Plugin For jQuery - BBC Carousel

A lightweight and simple-to-use jQuery plugin for creating a BBC style, full-width and responsive content carousel on your webpage / web application.

Basic Usage:

1. Load the required BBCCarousel.css in the head section, and the BBCCarousel.js in the footer but after jQuery library.

<link href="BBCCarousel.css" rel="stylesheet">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="BBCCarousel.js"></script>

2. The Html structure to create a content carousel with next/prev arrows navigation.

<section class="BBCCarousel">
  <div class="BBCCarousel-mask">
    <div class="BBCCarousel-car">
      <div class="BBCCarousel-pane"> <img src="1.jpg">
        <h1 class="BBCCarousel-pane-title">Caption 1</h1>
      </div>
      <div class="BBCCarousel-pane"> <img src="2.jpg">
        <h1 class="BBCCarousel-pane-title recipe-title">Caption 2</h1>
      </div>
      <div class="BBCCarousel-pane"> <img src="3.jpg">
        <h1 class="BBCCarousel-pane-title recipe-title">Caption 3</h1>
      </div>
    </div>
    <div class="BBCCarousel-arrows">
      <button class="BBCCarousel-arrow BBCCarousel-arrow--previous" id="js-arrow-previous">Previous</button>
      <button class="BBCCarousel-arrow BBCCarousel-arrow--next" id="js-arrow-next">Next</button>
    </div>
  </div>
</section>

3. Call the plugin on the parent container and set the fix width for the inner carousel panes.

$('.BBCCarousel').BBCCarousel({
  paneWidth : 990
});

---

This awesome jQuery plugin is developed by mjbp. For more Advanced Usages, please check the demo page or visit the official website.