Accordion Style Content Slider with CSS3 Flex and Transition

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;
}