Basilico Slider
BasilicoSlider creates an adaptive image slideshow for mobile device browser: it calculates the right dimensions according to container width, as a div tag, and browser height.
Basilico Slider other characteristics:
- toLeft, toRight and fadeOut effects with CSS3 transitions where supported.
- Uses requestAnimationFrame where supported, thanks to jsTimer-hack.
- You can use any proportion you want! You also can use original image size!
- It supports orientation changes and also resizing to support old safari versions.
- No javascript framework used.
- Low size: just 11kb minimized.
Tested on mobile browsers:
- IPhone: Safari, Opera mini, ...
- Android: Dolphin, Firefox, ..
Note: the script doesn't let start effects and users will see only the first image in the array, if it detects Opera Mini, becasuse Opera Mini stops effects for his optimizations.
JSDoc
/**
* basilicoSlider(aImgs, proportion, maxWidth, cssClass[, divContainer])
*
* Create a imageslider effect
* aImg: an array of image url
* proportion: the images proportion - examples: {x:4,y:3} , {x:16,y:9}
* maxWidth: the max width of the slider
* cssClass: a css class to apply to image, can be ""
* divContainer: the id of the container
*/
How To Use
Inline js...<div>
<script type="text/javascript">
new basilicoSlider([ "img/1.jpg", "img/2.jpg", "img/3.jpg"], {x:1:y:2}, 300, "shadow");
</script>
</div>...
DOMContentLoaded event
...
<script type="text/javascript">
addEventListener("DOMContentLoaded",
function() { new basilicoSlider([ "img/1.jpg", "img/2.jpg", "img/3.jpg"], {x:1:y:2}, 300, "shadow", "divId");}
, false);
</script>
</head>
<body>
<div id="divId"></div>
...