jascarousel

<!doctype html> <html> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134968642-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-134968642-1'); </script> <title>jasCarousel | 3D carousel | Examples</title> <meta charset="utf-8"> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="keywords" content="3D carousel, 3d slider, jquery carousel, carousel, jquery carousel plugin, carousel slider"> <meta name="description" content="jQuery plugin that lets you create beautiful responsive 3D carousel slider."> <meta name="author" content="Parth Jasani"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css/style.css"> <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> <script src="js/jquery.min.js"></script> </head> <body class="example-page"> <main> <header> <div class="header_inner"> <h1 class="logo"> <a href="https://jascarousel.github.io/jascarousel/" title="jas-carouse"> <img src="img/jas-carousel-logo.png" alt="jas-carousel-logo"> </a> </h1> <nav> <a class="active" href="examples.html">Examples</a> <a href="options.html">Options</a> <a href="https://github.com/jasCarousel/jascarousel">Github</a> <a href="./jasCarousel.zip" download>Download</a> </nav> </div> </header> <div class="usage"> <div class="container cf"> <h2>Examples</h2> <div class="example-box"> <h3>Basic</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="324" style="width: 100%;" scrolling="no" title="jasCarousel Basic" src="//codepen.io/parthjasani/embed/GzXjZY/?height=324&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/GzXjZY/'>jasCarousel Basic</a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> <div class="example-box"> <h3>Auto</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="314" style="width: 100%;" scrolling="no" title="jasCarousel Auto" src="//codepen.io/parthjasani/embed/bzxwob/?height=314&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/bzxwob/'>jasCarousel Auto</a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> <div class="example-box"> <h3>Previous direction</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="310" style="width: 100%;" scrolling="no" title="jasCarousel Previous direction" src="//codepen.io/parthjasani/embed/zeJKpd/?height=310&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/zeJKpd/'>jasCarousel Previous direction</a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> <div class="example-box"> <h3>Vertical</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="607" style="width: 100%;" scrolling="no" title="jasCarousel Verticale " src="//codepen.io/parthjasani/embed/jdvMYb/?height=607&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/jdvMYb/'>jasCarousel Verticale </a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> <div class="example-box"> <h3>Front face slide horizontal</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="322" style="width: 100%;" scrolling="no" title="jasCarousel Front face slide horizontal" src="//codepen.io/parthjasani/embed/exLdrW/?height=322&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/exLdrW/'>jasCarousel Front face slide horizontal</a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> <div class="example-box"> <h3>Front face slide vertical</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="650" style="width: 100%;" scrolling="no" title="jasCarousel Front face slide vertical" src="//codepen.io/parthjasani/embed/daqpjq/?height=650&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/daqpjq/'>jasCarousel Front face slide vertical</a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> <div class="example-box"> <h3>Move slide on click</h3> <p>Without any options configured and sixten slides added to JasCarousel</p> <div class="codepen"> <iframe height="326" style="width: 100%;" scrolling="no" title="jasCarousel move slide on click" src="//codepen.io/parthjasani/embed/WPgGgQ/?height=326&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/parthjasani/pen/WPgGgQ/'>jasCarousel move slide on click</a> by Parth (<a href='https://codepen.io/parthjasani'>@parthjasani</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> </div> </div> </div> </main> <footer> <p>Released under the <a href="https://opensource.org/licenses/MIT">MIT License</a></p> <p>Copyright © 2019 jasCarosuel | Developed with ♥ by <a href="http://jasaniweb.com" target="_blank">Parth</a></p> </footer> </body> <script> </script> </html>