jQuery Image Carousel Slider with Fancy JS Animations - osSlider

jQuery Image Carousel Slider with Fancy JS Animations - osSlider
File Size: 394 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

osSlider is a lightweight jQuery plugin used to create an image carousel slider with a fancy 'slice' animations based on JavaScript and CSS / CSS3.

See also:

How to use it:

1. Load the required style sheet osSlider.css in the head section and the Javascript osSlider.js at the bottom of the document.

<head>
  ...
  <link rel="stylesheet" href="osSlider.css">
  ...
</head>

<body>
  ...
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="osSlider.js"></script>
  ...
</body>

2. Create a carousel slider from a list of images.

<div class="slider">
  <ul class="slider-main">
    <li>
      <img src="1.jpg" alt="">
    </li>
    <li>
      <img src="2.jpg" alt="">
    </li>
    <li>
      <img src="3.jpg" alt="">
    </li>
    <li>
      <img src="4.jpg" alt="">
    </li>
  </ul>
</div>

3. Initialize the plugin to generate an image carousel slider with next / prev arrows and a bottom pagination.

var slider = new osSlider({ 

    // parent container
    pNode:'.slider',

    // child elements
    cNode:'.slider-main li',
    
});

4. Change the animation speed.

var slider = new osSlider({ 

    // parent container
    pNode:'.slider',

    // child elements
    cNode:'.slider-main li',

    // animation speed in ms
    speed:3000

});

5. Disable autoplay.

var slider = new osSlider({ 

    // parent container
    pNode:'.slider',

    // child elements
    cNode:'.slider-main li',

    // enable autoplay
    autoPlay: false

});

This awesome jQuery plugin is developed by ossso. For more Advanced Usages, please check the demo page or visit the official website.