| <!-- Begin Adaptive Slider demo --> | |
| <h1 id="title">Adaptive Slider</h1> | |
| <ul class="adaptive-slider"> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/abstract/1/"> | |
| <figcaption> | |
| <h1>Hover me!</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 --> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/sports/1/"> | |
| <figcaption> | |
| <h1>Dolor Sit Amet</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 --> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/food/5/"> | |
| <figcaption> | |
| <h1>This is an example image</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 --> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/nightlife/1/"> | |
| <figcaption> | |
| <h1>This one has no description</h1> | |
| </figcaption> | |
| </figure> | |
| </li> | |
| <!-- End Slider Item --> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/abstract/5/"> | |
| <figcaption> | |
| <h1>This is awesome!</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 --> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/abstract/6/"> | |
| <figcaption> | |
| <h1>This is awesome!</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 --> | |
| <!-- Slider Item --> | |
| <li> | |
| <figure> | |
| <img src="http://lorempixel.com/980/400/abstract/7/"> | |
| <figcaption> | |
| <h1>This is awesome!</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> | |
| <!-- End adaptive slider demo --> | |
| <div class="center"> | |
| <iframe src="http://ghbtns.com/github-btn.html?user=creative-punch&repo=jQuery.adaptive-slider&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true"></iframe> | |
| <br /> | |
| <h1 id="author">Plugin and demo by <a href="http://creative-punch.net" target="_blank">Creative Punch</a></h1> | |
| </div> |
A Demo for a plugin I made.
The plugin creates a slider which will adapt the color of its navigation and figcaption (both background and text color) to the primary color of the image that you are currently viewing.
A Pen by Creative Punch on CodePen.
| /* | |
| / Initialize the plugin. | |
| / You can set the opacity of the figcaption | |
| / You can also change the color of the | |
| / Light and dark text. | |
| / | |
| / The light text will automatically appear | |
| / on a dark figcaption, and vice versa. | |
| */ | |
| $(function() { | |
| $('.adaptive-slider').adaptiveSlider({ | |
| opacity: 0.7, | |
| normalizedTextColors: { | |
| light: '#f1f1f1', | |
| dark: '#222' | |
| } | |
| }); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://rawgithub.com/Creative-Punch/jQuery.adaptive-slider/master/dist/vendor/rgbaster/rgbaster.min.js"></script> | |
| <script src="https://rawgithub.com/Creative-Punch/jQuery.adaptive-slider/master/dist/js/jquery.adaptiveslider.min.js"></script> |
| /* | |
| * Adaptive jQuery Slider Plugin CSS - v1.0.0 | |
| * A jQuery plugin for a slider with adaptive colored figcaption and navigation. | |
| * http://creative-punch.net | |
| * | |
| * Made by Creative Punch | |
| * Under MIT License | |
| */ | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans); | |
| ul.adaptive-slider { | |
| margin: 0 auto; | |
| padding: 0; | |
| width: 980px; | |
| height: 400px; | |
| position: relative; | |
| } | |
| ul.adaptive-slider li { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| ul.adaptive-slider li.slider-nav { | |
| cursor: pointer; | |
| position: absolute; | |
| z-index: 2; | |
| text-align: center; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 3em; | |
| display: block; | |
| line-height: 400px; | |
| height: 400px; | |
| width: 60px; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| opacity: 0.7; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| user-select: none; | |
| -webkit-transition: opacity 0.3s, background-color 0.3s, color 0.3s; | |
| -moz-transition: opacity 0.3s, background-color 0.3s, color 0.3s; | |
| -o-transition: opacity 0.3s, background-color 0.3s, color 0.3s; | |
| transition: opacity 0.3s, background-color 0.3s, color 0.3s; | |
| } | |
| ul.adaptive-slider li.slider-nav:hover { | |
| opacity: 1; | |
| } | |
| ul.adaptive-slider li.slider-nav.next { | |
| right: 0; | |
| } | |
| ul.adaptive-slider li.slider-nav.prev { | |
| left: 0; | |
| } | |
| ul.adaptive-slider li.slider-item { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| -webkit-transition: opacity 0.5s; | |
| -moz-transition: opacity 0.5s; | |
| -o-transition: opacity 0.5s; | |
| transition: opacity 0.5s; | |
| } | |
| ul.adaptive-slider li.slider-item.active { | |
| opacity: 1; | |
| } | |
| ul.adaptive-slider li.slider-item figure { | |
| margin: 0; | |
| position: relative; | |
| } | |
| ul.adaptive-slider li.slider-item figure img { | |
| display: block; | |
| } | |
| ul.adaptive-slider li.slider-item figure figcaption { | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| width: calc(100% - 120px); | |
| text-align: center; | |
| position: absolute; | |
| bottom: 0; | |
| left: 60px; | |
| z-index: 1; | |
| max-height: 6em; | |
| overflow: hidden; | |
| -webkit-transition: max-height 1s; | |
| -webkit-transition-delay: 0.2s; | |
| -moz-transition: max-height 1s 0.2s; | |
| -o-transition: max-height 1s 0.2s; | |
| transition: max-height 1s 0.2s; | |
| } | |
| ul.adaptive-slider li.slider-item figure figcaption h1 { | |
| line-height: 3em; | |
| margin: 0; | |
| font-weight: 400; | |
| } | |
| ul.adaptive-slider li.slider-item figure figcaption p { | |
| margin: 0; | |
| padding: 0 20px 20px 20px; | |
| display: block; | |
| overflow: hidden; | |
| text-align: justify; | |
| } | |
| ul.adaptive-slider li.slider-item figure figcaption:hover { | |
| max-height: 100%; | |
| } | |
| /* Demo CSS */ | |
| body { | |
| background: #f1f1f1; | |
| font-family: "Open Sans"; | |
| } | |
| h1#title, h1#author { | |
| text-align: center; | |
| color: #222; | |
| font-weight: 400; | |
| } | |
| div.center { | |
| text-align: center; | |
| margin: 20px auto; | |
| } | |
| div.center h1#author a { | |
| text-decoration: none; | |
| color: #89F; | |
| } | |
| div.center h1#author a:hover { | |
| text-decoration: none; | |
| color: #68E; | |
| } |