Click here to preview without iframe
The Simple Slider is a jQuery plugin you can use to display your image and Vimeo or Youtube videos. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device.
Please remove the preview iframe on the top. Or preview with the link above. Otherwise there is a flicker white in safari every time the image changes, it’s a bug of Safari with iframe and CSS3 animation. It works fine when you don’t embed it in an iframe.
The API looks like
$(document).ready(function() {
$('#banner').simpleSlider({
className: 'simpleSlider', // the wrapper's name
easeInType: 'fadeInLeft', // the ease in animation style
easeOutType: 'rollOut', // the ease out animation style
width: 960, // width of the slider
height: 400, // height of the slider
showArrow: true, // display the previous/next arrow or not
showButton: true, // display the circle buttons or not
});
});
Features:
- CSS3 driven animation.
- It’s lightweight.
- Support Youtube, Vimeo video etc.
- Touch device support. I’ve tested it in an iPhone.
- Optional arrow and buttons.
Recommendations For You
XML Image/Video Grid Gallery:
XML Image/Video Portfolio Template:
