Awesome 3D carousel plugin
https://jascarousel.github.io/jascarousel/
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:
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>
$(".slider").jasCarousel({
margin: 20,
auto: false,
speed: 800,
delay: 2000,
slideFrontFace: false,
moveOnSlideClick: true,
prevText:'Prev',
nextText:'Next'
})
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. |
Please review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.