liteAccordion - a horizontal accordion plugin for jQuery
レスポンシブタイプ
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>liteAccordion - a horizontal accordion plugin for jQuery</title> <style> /* css for this page */ body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; margin: 30px 0 60px; text-align: center; background: #eee } body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px } .wrapper { margin: 0 auto; text-align: left; width: 95% } h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white } strong + p { margin-top: 0 } dt { font-weight: bold } dd { margin: 0 } figure { display: block; width: 100%; height: 100%; margin: 0 } figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px } </style> <!-- liteAccordion css --> <link href="css/liteaccordion.css" rel="stylesheet" /> <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- liteAccordion js --> <script src="js/liteaccordion.jquery.min.js"></script> <!--[if lt IE 9]> <script> document.createElement('figure'); document.createElement('figcaption'); </script> <![endif]--> </head> <body> <div class="wrapper"> <div id="responsive"> <ol> <li> <h2><span>Slide One</span></h2> <div> <figure> <img src="img-demo/1.jpg" alt="image" /> </figure> </div> </li> <li> <h2><span>Slide Two</span></h2> <div> <figure> <img src="img-demo/2.jpg" alt="image" /> </figure> </div> </li> <li> <h2><span>Slide Three</span></h2> <div> <figure> <img src="img-demo/3.jpg" alt="image" /> </figure> </div> </li> <li> <h2><span>Slide Four</span></h2> <div> <figure> <img src="img-demo/4.jpg" width="768" alt="image" /> </figure> </div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript> </div> </div> <!-- liteAccordion demos --> <script> (function($) { $('#responsive').liteAccordion({ firstSlide : 1, responsive : true, autoScaleImages : true }); })(jQuery); </script> </body> </html>
liteAccordion v2 | Freelance Front End Web Developer, Surrey & London UK