Semantic 3D Rotator With jQuery And CSS3 - jQuery jasCarousel
File Size: | 162 KB |
---|---|
Views Total: | 3317 |
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.
<link rel="stylesheet" href="css/jas-carousel.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/jas-carousel.js"></script>
2. Add slides as list itmes to the HTML unordered list as follows:
<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> ... </ul>
3. Call the plugin on the HTML list to generate a default 3D rotator.
$(".slider").jasCarousel()
4. Customize the 3D rotator by overring the default settings.
$(".slider").jasCarousel({ // or 'vertical' mode: 'horizontal', // transition delay delay:1500, // autoplay auto:true, // autoplay direction autoDirection: 'next', // navigation options navigation:true, prevText:"prev", nextText:"next", // margin in pixels margin:0, // custom perspective perspective:1100, // slide front face? slideFrontFace:false, // move on slide click? moveOnSlideClick:false, // animation speed speed:2000 })
This awesome jQuery plugin is developed by jasCarousel. For more Advanced Usages, please check the demo page or visit the official website.