jQuery Image Slider with Adaptive Colored Image Captions - Adaptive Slider
File Size: | 423 KB |
---|---|
Views Total: | 3515 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.