Fancy Pure CSS Accordion Slider

This is fancy accordion slider which build with pure css without jquery or javascript. The slider is responsive and work well on all mobile devices and tablets. It support wide range of browsers which also include desktop and mobile.

A natural CSS/CSS3 accordion slider that you’ll be able to amplify the specified slide into complete length on mouse hover or contact faucet. Responsive structure in line with CSS3 flexbox style. Recently comes win five fancy transition results.

Fancy Pure CSS Accordion Slider

Code the accordion slider.

<div elegance="flexbox-slider my-flexbox-slider"> <div elegance="flexbox-slide"> <img src="1.jpg" alt="Slide Symbol"> <div elegance="text-block"> <h3>Slide #1 is right here</h3> <div elegance="textual content"> <p>Lorem ipsum dolor take a seat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> </div> </div> </div> <div elegance="flexbox-slide"> <img src="2.jpg" alt="Slide Symbol"> <div elegance="text-block"> <h3>Slide #2 is right here</h3> <div elegance="textual content"> <p>Lorem ipsum dolor take a seat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> </div> </div> </div> <div elegance="flexbox-slide"> <img src="three.jpg" alt="Slide Symbol"> <div elegance="text-block"> <h3>Slide #three is right here</h3> <div elegance="textual content"> <p>Lorem ipsum dolor take a seat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> </div> </div> </div> ... </div>

The principle CSS/CSS3 regulations for the accordion slider.

.flexbox-slider .flexbox-slider .flexbox-slide .flexbox-slider .flexbox-slide:after .flexbox-slider .flexbox-slide img .flexbox-slider .flexbox-slide .text-block .flexbox-slider .flexbox-slide .text-block h3 .flexbox-slider:hover .flexbox-slide:hover

Observe your personal CSS transition impact to the accordion slider.

.flexbox-slider.flexbox-slider-demo .flexbox-slide .text-block .flexbox-slider.flexbox-slider-demo:hover .flexbox-slide:hover .text-block

The submit Fancy Accordion Slider With Natural CSS gave the impression first on CSS Script.

 

Leave a Reply

Your email address will not be published. Required fields are marked *