Basilico Carousel

BasilicoCarousel creates a three images carousel in your webpage.

Basilico Slider other characteristics:

  • Supports touch or mouse events, where available.
  • It uses requestAnimationFrame to be light for the browser.
  • You can use any proportion you want! You also can use original image size!
  • It supports orientation changes for tablet and also resizing for desktop browser.
  • No javascript framework used: so no Jquery old version or other conflict problems.
  • Low size: just 20kb minimized.

Note: the script doesn't let start effects if it detects Opera Mini, because Opera Mini stops effects for his optimizations.
Note n°2: the script needs that browser supports css3 background-size property (there also a check into script).

JSDoc

/**
* basilicoCarousel(aImgs, maxWidth, proportion, [, divContainer [,options]])
*
* Create a three-image carousel
* aImg: an array of image url - example {images: [{url: "", text: "", link:""}, {url: "", text: ""}, ...] [, urlTarget: "_blank"]}
* maxWidth: the max width of the carusel
* proportion: the images proportion - example: {x:4,y:3}
* [divContainer: the id of the container, can be null]
* [options: {
cssClass:"shadow",//this is not the default value
timer:5000(in milliseconds), //the time to stay on an image
showImagesCounter:true (or false),
counterBgColor:"grey"or "ulr(img.gif)",
counterColor:"white",
usePerspective: false (or true), //Perspective is used where browser supports css3 transform property
loadingImage: "loader.gif",
loadingText: "Loading", //loadingTextBgColor is textBgColor and loadingTextColor is textColor
loadingContainerBgColor: "grey", //is the background of div contanier while loading images
textBgColor: "grey" or "url(img.gif)",
textColor: "white"
}]
*/

How To Use

Inline javascript
...<div>
<script type="text/javascript">
var imgs = { images: [{url:"img/foto/1.jpg", text:"bar"}, {url:"img/foto/2.jpg", },{url:"img/foto/3.jpg", text:"foo"},{url:"img/foto/4.jpg", }]};
new basilicoCarousel(imgs, 1150, {x:16, y:9}, null, {cssClass:"shadow", loadingImage:"loader.gif"});
</script>
</div>...

Load event
...
<script type="text/javascript">
window.addEventListener("load",
function() { var imgs = { images: [{url:"img/foto/1.jpg", text:"bar"}, {url:"img/foto/2.jpg", },{url:"img/foto/3.jpg", text:"foo"},{url:"img/foto/4.jpg", }]}; new basilicoCarousel(imgs, 1150, {x:16, y:9}, "divId", {cssClass:"shadow", loadingImage:"loader.gif"});}
, false); </script>
</head>
<body>
<div id="divId"></div>
...

Style customization

To customize the carousel with CSS, you have these ids: I suggest you to set !important for each declaration, to overwrite inline rules, an example:

#BasilicoCarouselText a, #BasilicoCarouselText a:visited {color: white !important}

Download

Basilico Carousel v. 2 - minimized version

Example

Your browser doesn't support CSS3 background-size property