jQuery Image Carousel Slider with Fancy JS Animations - osSlider
| File Size: | 394 KB |
|---|---|
| Views Total: | 5376 |
| 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:
- Responsive jQuery Carousel/Slider with Slice Transitions - indySliceSlider
- Tiny jQuery Image Slideshow with Slice Transition Effect - slydify
- Minimal jQuery Based Slideshow with Slice Effects - filoSlider
- Slice Images into Tiles with jQuery and CSS3
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.
