jasCarousel
Awesome 3D carousel plugin
Demo
https://jascarousel.github.io/jascarousel/
CDN
To start working with jasCarousel right away, there's a couple of CDN choices availabile to serve the files as close, and fast as possible to your users:
- https://jascarousel.github.io/jascarousel/js/jas-carousel.js
- https://jascarousel.github.io/jascarousel/css/jas-carousel.css
Include following style and script into your HTML <head>:
<link rel="stylesheet" type="text/css" href="https://jascarousel.github.io/jascarousel/css/jas-carousel.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://jascarousel.github.io/jascarousel/js/jas-carousel.js"></script>After that follow HTML structure:
Html Settings
In jasCarousel you need to follow this html structure
Example:
<ul class="slider"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul>JavaScript setting and default options
$(".slider").jasCarousel({ margin: 20, auto: false, speed: 800, delay: 2000, slideFrontFace: false, moveOnSlideClick: true, prevText:'Prev', nextText:'Next' }) Options
| Name | default | description |
|---|---|---|
| auto | true | 3Dcarousel will auto play with this option |
| delay | 1500 | delay between slide transition |
| speed | 2000 | Transition Speed of slide change |
| navigation | true | To genrate navigation button in 3Dcarousel |
| prevText | "prev" | Add text into prev button |
| nextText | "next" | Add text into next button |
| autoDirection | "next" | Auto direction of slider navigation "next" and "prev" |
| mode | "horizontal" | if set value "horizontal" it will generate horizonral carousel. And "vertical" will generate vartical carousel |
| margin | 0 | Margin between each slide. |
Contributing
Please review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
