This time I will share jQuery Plugin and tutorial about Semantic 3D Rotator With jQuery And CSS3 – jQuery jasCarousel, hope it will help you in programming stack.
| File Size: | 162 KB |
|---|---|
| Views Total: | 2551 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
“
jasCarousel is a responsive, semantic, customizable 3D rotator/carousel plugin built using jQuery, unordered list, and CSS3 3D transforms & perspective.
More features:
- Horizontal & vertical modes.
- Autoplay.
- Custom navigation controls.
How to use it:
1. To use the 3D rotator, include jQuery library and the plugin’s JavaScript & CSS files on the web page.
1 |
<link rel="stylesheet" href="css/jas-carousel.css"> |
2 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" |
3 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin="anonymous"> |
5 |
</script> |
6 |
<script src="js/jas-carousel.js"></script> |
2. Add slides as list itmes to the HTML unordered list as follows:
01 |
<ul class="slider"> |
02 |
<li>1</li> |
03 |
<li>2</li> |
04 |
<li>3</li> |
05 |
<li>4</li> |
06 |
<li>5</li> |
07 |
<li>6</li> |
08 |
<li>7</li> |
09 |
<li>8</li> |
10 |
<li>9</li> |
11 |
<li>10</li> |
12 |
... |
13 |
</ul> |
3. Call the plugin on the HTML list to generate a default 3D rotator.
1 |
$(".slider").jasCarousel() |
4. Customize the 3D rotator by overring the default settings.
01 |
$(".slider").jasCarousel({ |
02 |
03 |
// or 'vertical' |
04 |
mode: 'horizontal', |
05 |
06 |
// transition delay |
07 |
delay:1500, |
08 |
|
09 |
// autoplay |
10 |
auto:true, |
11 |
12 |
// autoplay direction |
13 |
autoDirection: 'next', |
14 |
15 |
// navigation options |
16 |
navigation:true, |
17 |
prevText:"prev", |
18 |
nextText:"next", |
19 |
|
20 |
// margin in pixels |
21 |
margin:0, |
22 |
23 |
// custom perspective |
24 |
perspective:1100, |
25 |
26 |
// slide front face? |
27 |
slideFrontFace:false, |
28 |
29 |
// move on slide click? |
30 |
moveOnSlideClick:false, |
31 |
32 |
// animation speed |
33 |
speed:2000 |
34 |
|
35 |
}) |
This awesome jQuery plugin is developed by jasCarousel. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
