Author: | tari |
---|---|
Views Total: | 11,404 views |
Official Page: | Go to website |
Last Update: | March 12, 2016 |
License: | MIT |
Preview:

Description:
A smooth, responsive content slider built on top of HTML radio inputs and CSS3 animations & flexbox model.
How to use it:
Add slider content and radio input controls to your webpage as follows:
<div class="slider"> <input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/> <input type="radio" name="slider" title="slide2" class="slider__nav"/> <input type="radio" name="slider" title="slide3" class="slider__nav"/> <input type="radio" name="slider" title="slide4" class="slider__nav"/> <div class="slider__inner"> <div class="slider__contents"> <h2 class="slider__caption">Slide 1</h2> <p class="slider__txt">Content 1</p> </div> <div class="slider__contents"> <h2 class="slider__caption">Slide 2</h2> <p class="slider__txt">Content 2</p> </div> <div class="slider__contents"> <h2 class="slider__caption">Slide 3</h2> <p class="slider__txt">Content 3</p> </div> <div class="slider__contents"> <h2 class="slider__caption">Slide 4</h2> <p class="slider__txt">Content 4</p> </div> </div> </div>
The CSS to style the slider.
.slider { height: 100%; position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .slider__nav { width: 12px; height: 12px; margin: 2rem 12px; border-radius: 50%; z-index: 10; outline: 6px solid #ccc; outline-offset: -6px; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slider__nav:checked { -webkit-animation: check 0.5s linear forwards; animation: check 0.5s linear forwards; } .slider__nav:checked:nth-of-type(1) ~ .slider__inner { -webkit-transform: translateX(0%); transform: translateX(0%); } .slider__nav:checked:nth-of-type(2) ~ .slider__inner { -webkit-transform: translateX(-25%); transform: translateX(-25%); } .slider__nav:checked:nth-of-type(3) ~ .slider__inner { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slider__nav:checked:nth-of-type(4) ~ .slider__inner { -webkit-transform: translateX(-75%); transform: translateX(-75%); } .slider__inner { position: absolute; top: 0; left: 0; width: 400%; height: 100%; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .slider__contents { height: 100%; padding: 2rem; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .slider__image { font-size: 2.7rem; } .slider__caption { font-weight: 700; margin: 2rem 0 1rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-transform: uppercase; } .slider__txt { color: #999; margin-bottom: 3rem; max-width: 300px; }
The CSS3 rules for the check animations.
@-webkit-keyframes check { 50% { outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2); } 100% { outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); } } @keyframes check { 50% { outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2); } 100% { outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); } }
is it possible to make it auto rotate
Can you use images with this content slider? D: