jQuery Image Slider with Adaptive Colored Image Captions - Adaptive Slider

A jQuery, Html5, CSS3 based image carousel/slider that has the ability to dynamically change the background/text color of the image caption and navigation according to the dominant color of an image.

How to use it:

1. Include the required jQuery library and jQuery rgbaster.js on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="dist/vendor/rgbaster/rgbaster.min.js"></script>

2. Include the jQuery Adaptive Slider plugin's javascript and stylesheet files on the web page.

<link rel="stylesheet" href="dist/styles/adaptiveslider.min.css">
<script src="dist/js/jquery.adaptiveslider.js"></script>

3. Create the Html for an image carousel/slider. Use Html5 figure and figcaption elements to markup images and captions.

<ul class="adaptive-slider">

<li>
<figure> <img src="images/1.jpg">
<figcaption>
<h1>Title 1</h1>
<p> Your content goes here</p>
</figcaption>
</figure>
</li>

<li>
<figure> <img src="images/2.jpg">
<figcaption>
<h1>Title 2</h1>
<p> Your content goes here</p>
</figcaption>
</figure>
</li>

<li>
<figure> <img src="images/3.jpg">
<figcaption>
<h1>Title 3</h1>
<p> Your content goes here</p>
</figcaption>
</figure>
</li>


</ul>

4. Call the plugin with options.

<script>
$(function() {
$('.adaptive-slider').adaptiveSlider({
opacity: 0.7, // This will allow you to set the opacity of the figcaption. 
normalizedTextColors: { // This allows you to configure what color the light text (on a dark background) should have, and vice versa.
light: '#f1f1f1',
dark: '#222'
}
});
});
</script>

---

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