Smooth Horizontal Accordion Slideshow with jQuery and CSS3
File Size: | 2.28 KB |
---|---|
Views Total: | 11149 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An elegant jQuery & CSS3 based horizontal slideshow with smooth accordion effects using jQuery animation APIs. Mouse hover a slide to expand and the others will be collapsed.
How to use it:
1. Create content for the horizontal slideshow using Html unordered lists.
<ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading">Heading</div> <div class="bgDescription"></div> <div class="description"> <h2>Heading 1</h2> <p>Description 1</p> <a href="#">Read more</a> </div> </li> </ul> <ul class="accordion" id="accordion"> <li class="bg2"> <div class="heading">Heading2</div> <div class="bgDescription"></div> <div class="description"> <h2>Heading 2</h2> <p>Description 2</p> <a href="#">Read more</a> </div> </li> </ul> <ul class="accordion" id="accordion"> <li class="bg3"> <div class="heading">Heading3</div> <div class="bgDescription"></div> <div class="description"> <h2>Heading 3</h2> <p>Description 3</p> <a href="#">Read more</a> </div> </li> </ul> <ul class="accordion" id="accordion"> <li class="bg4"> <div class="heading">Heading4</div> <div class="bgDescription"></div> <div class="description"> <h2>Heading 4</h2> <p>Description 4</p> <a href="#">Read more</a> </div> </li> </ul>
2. The core CSS styles for the accordion slideshow.
ul.accordion { list-style-type: none; position: relative; top: 0; font-family: "roboto", sans-serif; font-size: 16px; font-style: italic; line-height: 1.5em; } ul.accordion li { float: left; width: 115px; height: 480px; display: block; border-right: 2px solid #fff; border-bottom: 2px solid #fff; background: #fff; background-repeat: no-repeat; background-position: center center; position: relative; overflow: hidden; cursor: pointer; -webkit-box-shadow: 1px 3px 5px #555; -moz-box-shadow: 1px 3px 5px #555; box-shadow: 1px 3px 5px #555; }
3. Add background images to the content slides.
ul.accordion li.bg1 { background-image: url("1.jpg"); } ul.accordion li.bg2 { background-image: url("2.jpg"); } ul.accordion li.bg3 { background-image: url("3.png"); } ul.accordion li.bg4 { background-image: url("4.jpg"); }
4. Style the other slideshow elements in the CSS.
ul.accordion li.bleft { border-left: 2px solid #fff; } ul.accordion li .heading { background: #fff; padding: 10px; margin-top: 60px; opacity: 0.9; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-size: 14px; color: #444; text-align: center; text-shadow: -1px -1px 1px #ccc; } ul.accordion li .description { position: absolute; width: 480px; height: 175px; bottom: 0; left: 0; display: none; } ul.accordion li .description h2 { text-transform: uppercase; font-style: normal; font-weight: bold; letter-spacing: 1px; font-size: 45px; color: #444; text-align: left; margin: 0 0 15px 20px; text-shadow: -1px -1px 1px #ccc; } ul.accordion li .description p { line-height: 14px; margin: 10px 22px; font-family: "roboto", sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; line-height: 1.6em; } ul.accordion li .description a { position: absolute; bottom: 5px; left: 20px; text-transform: uppercase; font-style: normal; font-size: 11px; text-decoration: none; color: #888; } ul.accordion li .description a:hover { color: #333; text-decoration: underline; } ul.accordion li .bgDescription { background: linear-gradient(0deg, #fff 40%, rgba(255,255,255,0)); height: 340px; position: absolute; bottom: 0px; left: 0px; width: 100%; display: none; }
5. Add the following JavaScript snippets after jQuery library to enable the accordion slideshow.
$(function(){ $(".accordion > li").hover( function(){ var $this = $(this); $this.stop().animate({"width": "480px"},500); $('.heading', $this).stop(true,true).fadeOut(); $('.bgDescription', $this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }, function(){ var $this = $(this); $this.stop().animate({"width": "115px"},1000); $('.heading', $this).stop(true,true).fadeIn(); $('.bgDescription', $this).stop(true,true).slideUp(500); $('.description',$this).stop(true,true).fadeOut(); } ) });
This awesome jQuery plugin is developed by tourn171. For more Advanced Usages, please check the demo page or visit the official website.