Author: | dp_lewis |
---|---|
Views Total: | 9,540 views |
Official Page: | Go to website |
Last Update: | June 25, 2014 |
License: | Unknown |
Preview:

Description:
An accordion style smooth content slider created by dp_lewis that allows you to expand the current slide with a smooth sliding animation when hover over, built with CSS3 flex and transition properties.
How to use it:
Make a content slider using Html unordered list.
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
The main CSS styles to create an accordion style content slider like the CSS3 flexible boxes.
ul, li { margin: 0; padding: 0; list-style: none; } ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } li { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-transition: -webkit-box-flex 500ms ease-out; -webkit-transition: -webkit-flex 500ms ease-out; transition: -webkit-box-flex 500ms ease-out; transition: -ms-flex 500ms ease-out; transition: flex 500ms ease-out; padding: 20px; }
The CSS to style the slides.
li:nth-child(1) { background: #f2b635; } li:nth-child(2) { background: #f19a2a; } li:nth-child(3) { background: #49b3e8; } li:nth-child(4) { background: #00a0e6; } li:nth-child(5) { background: #f25648; }
The CSS to animate the slider when mouse hover.
li:hover { -webkit-box-flex: 3; -webkit-flex: 3; -ms-flex: 3; flex: 3; }