Responsive & Modular Carousel / Slider Plugin For jQuery and Bootstrap 3 - Moodular

Moodular is a responsive carousel / slider plugin built on top of jQuery and Boostrap 3 that comes with 2 modules (controls & effects) in order to create your own styles.

How to use it:

1. Include Twitter Bootstrap's CSS in the head section of your page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" media="screen">

2. Create the Html for the carousel / slider using Html unordered list.

<ul id="moodular">
<li>
<p style="background-image: url(background-image-1.jpg);"><span>Description 1</span></p>
</li>
<li>
<p style="background-image: url(background-image-2.jpg);"><span>Description 2</span></p>
</li>
<li>
<p style="background-image: url(background-image-3.jpg);"><span>Description 3</span></p>
</li>
...
</ul>

3. Create the html for the pagination.

<p class="row">
<ul id="pagination" class="pagination">
</ul>
</p>

4. The CSS to style the carousel / slider.

#moodular {
overflow: hidden;
}
#moodular, #moodular li {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#moodular, #moodular li {
height: 400px;
}
#moodular li p {
display: block;
height: 400px;
}
#moodular li p span {
display: inline-block;
padding: 10px 10px;
color: #FFF;
margin: 10px;
}

5. Include jQuery library and jQuery Moodular's core.js and modules at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="src/core.js"></script> 
<script src="src/effects/fade.js"></script> 
<script src="src/controls/pagination.js"></script> 

6. Include jQuery easing plugin for easing functions. (Optional)

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 

7. Call the plugin with options.

$(document).ready(function() {
$('#moodular').moodular({
effects: 'fade',
controls: 'pagination',
timer: 500,
step: 1,
speed: 2000,
easing: ''
queue : true,
pagination: $('#pagination')
});
});

Change log:

v4.4 (2014-03-27)

• left effects can have an object as view options ( ex : { 0 : 1, 768 : 2, 1024 : 3 } and ww = windows.width means if ww < 768 => 1 viewed, 768 < ww < 1024 => 2 viewed, else 3 viewed )

---

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