Dynamic Responsive Bootstrap Carousel Plugin - Carouselize.js

Carouselize.js is an easy and small jQuery plugin to dynamically generate a cross-fading slideshow using Bootstrap carousel component.

How to use it:

1. The plugin requires JQuery library and Bootstrap framework loaded in the document.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Create a container to place the Bootstrap carousel.

<div id="myCarousel" class="my-carousel center-block" tabindex="1">
  <noscript>
    <p>This code requires JavaScript, please enable it.</p>
  </noscript>
</div>

3. Add your own images to the Bootstrap carousel as these:

let slides = [
    {
        src: 'https://picsum.photos/1200/700?image=611',
        alt: 'Patryk Sobczak'
    },
    {
         src: 'https://picsum.photos/1200/700?image=613',
        alt: 'Patryk Sobczak'
    },
    {
         src: 'https://picsum.photos/1200/700?image=614',
        alt: 'Patryk Sobczak'
    },
];

4. Enable the carousel and done.

$('#myCarousel').carouselize(slides, true, 3000);

5. Possible parameters:

• slidesData: The data objects to load (must be an array)
• autoSize: Set a max-width size relative to the size of the image being the smallest
• speedTransition: Set the speed of the transition when changing slides
• speed: The carousel cycle speed

carouselize(slidesData, autoSize = false, speed = 5000, speedTransition = 500);

---

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