Dynamic Responsive Bootstrap Carousel Plugin - Carouselize.js
File Size: | 4.84 KB |
---|---|
Views Total: | 6234 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.