Semantic 3D Rotator With jQuery And CSS3 - jQuery jasCarousel

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.