A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Overview

Adaptive Slider jQuery Plugin

A jQuery plugin for a slider with adaptive colored figcaption and navigation.

This plugin will take a list of figure elements containing an image and a figcaption element and automagically insert navigation and color the figcaption background color and the navigation according to the main color found in the current image in the slider/carousel.

#Demo

Author: Creative Punch

Installation

You can get this plugin either through the repository, or with Bower

bower install adaptiveslider

Usage

First, be sure to add rgbaster.js and jQuery to your project. Next, make sure you have a list of images, with a figure element inside of the list item and a figcaption containing a description.

  <ul class="adaptive-slider">    
    <!-- Slider Item -->
    <li>
      <figure>
        <img src="images/4.jpg">
        <figcaption>
          <h1>Lorem Ipsum</h1>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
        </figcaption>
      </figure>
    </li>
    <!-- End Slider Item -->
    ...
  </ul>

Now you can simply initialize the slider with the following JavaScript:

$(function() {
	$('.adaptive-slider').adaptiveSlider({
		opacity: 0.7,
		normalizedTextColors: {
			light: '#f1f1f1',
			dark: '#222'
		}
	});
});

Both of the options are optional. Let's go over them!

Options

opacity: This will allow you to set the opacity of the figcaption. This defaults to 1 (full opacity)

normalizedTextColors: An array. This allows you to configure what color the light text (on a dark background) should have, and vice versa.

Contributing

Feel free to contribute by forking this project and sending me a pull request!

Todos

  • Make it responsive!
  • Add options for more slider animations other than fade

License

MIT License

You might also like...

Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.

Vegas – Backgrounds and Slideshows Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements. Important note: Vegas 2

Jan 7, 2023

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

Jan 3, 2023

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

Jan 3, 2023

The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

Sequence.js The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Sequence.js

Dec 20, 2022

Strut - An Impress.js and Bespoke.js Presentation Editor

Strut - An Impress.js and Bespoke.js Presentation Editor

All new development is happening in Strut2 Strut2 is currently private until we further solidify our "open source dividened program." Open Source Divd

Dec 30, 2022

JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe Repository JavaScript image gallery for mobile and desktop. Documentation and getting started guide. Demo and script home page. NPM npm ins

Dec 30, 2022

A lightweight carousel library with fluid motion and great swipe precision

A lightweight carousel library with fluid motion and great swipe precision

Embla Carousel Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency

Jan 4, 2023

Jquery-anyimagecomparisonslider-plugin - The any Image Comparison Slider is an extremely versatile yet slim slider for comparing images. You have a lot of options to configure the slider and it works just about everywhere.

any Image Comparison Slider (jquery-anyimagecomparisonslider-plugin ) Description The any Image Comparison Slider is an extremely versatile yet slim s

Sep 12, 2022

Accordion Slider is a jQuery plugin that combines the functionality of a slider with that of an accordion.

Accordion Slider - jQuery slider plugin A responsive and touch-enabled jQuery accordion slider plugin that combines the functionality of a slider with

Dec 29, 2022

Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Dec 24, 2022

TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

Nov 24, 2022

Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Navigation-Menu-Javascript A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked. Desktop view Mobile v

Feb 16, 2021

Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs » Se

Dec 28, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Another logger in JS. This one offers a console.log-like API and formatting, colored lines and timestamps (or not if desired), all that with 0 dependencies.

Another logger in JS. This one offers a console.log-like API and formatting, colored lines and timestamps (or not if desired), all that with 0 dependencies.

hellog Your new logger ! hellog is a general-purpose logging library. It offers a console.log-like API and formatting, extensible type-safety colored

Jan 5, 2022

Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer console in your browser

Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer console in your browser

ColorConsole NPM Package Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer consol

Sep 19, 2022

Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Dec 29, 2022
Releases(1.0.1)
Owner
null
An awesome, fully responsive jQuery slider plugin

FlexSlider 2.7.2 http://www.woocommerce.com/flexslider/ - Copyright (c) 2015 WooThemes Releases The master branch of this repository is always the lat

WooCommerce 4.9k Jan 3, 2023
:snowboarder: A responsive slider jQuery plugin with CSS animations

A responsive slider jQuery plugin with CSS animations Animations from animate.css Online demo Visit plugin website. Appszoom for developers also uses

Joan Claret 58 Dec 12, 2022
jQuery only range slider

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. Version: 2.3.1 | Version 3.x is under development now Project

Denis Ineshin 2.5k Dec 25, 2022
A jquery UI range selection slider that supports dates

jQRangeSlider, jQDateRangeSlider & jQEditRangeSlider A javascript slider selector that supports dates and touch devices Home page Documentation Suppor

Guillaume Gautreau 676 Sep 24, 2022
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 7, 2023
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

noUiSlider noUiSlider is a lightweight JavaScript range slider. No dependencies All modern browsers and IE > 9 are supported Fully responsive Multi-to

Léon Gersen 5.4k Dec 28, 2022
OlumSlider is a lightweight and flexible slider, written via vanilla js

olum-slider OlumSlider is a lightweight and flexible slider, written via vanilla js Documentation CDN <!DOCTYPE html> <html lang="en"> <head> <t

Olumjs 0 Oct 8, 2021
JavaScript library for one-directional scrolling with item based navigation support.

Sly JavaScript library for one-directional scrolling with item based navigation support. Sly supports navigation with: mouse wheel scrolling scrollbar

null 2.9k Dec 23, 2022
🎚 HTML5 input range slider element polyfill

rangeslider.js Simple, small and fast jQuery polyfill for the HTML5 <input type="range"> slider element. Check out the examples. Touchscreen friendly

André Ruffert 2.2k Jan 8, 2023
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 33.7k Jan 9, 2023