Created: 15/06/2012
By: Hemn Chawroka
Profile: CodeCanyon
Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
We start of with a simple HTML5 document that will be the backbone of our example.
<!DOCTYPE html>
<html>
<head>
<title>iCarousel</title>
<meta name="viewport" content="width=1024, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/icarousel.css" />
<link rel="stylesheet" href="css/demo1.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/icarousel.packed.js"></script>
<script>
$(document).ready(function(){
$('#icarousel').iCarousel();
});
</script>
</head>
<body>
<!-- BEGIN CONTAINER -->
<div class="carousel-container">
<!-- BEGIN #icarousel element container -->
<div id="icarousel">
<!-- The Slides Will Go Here -->
</div>
<!-- END #icarousel element container -->
</div>
<!-- END CONTAINER -->
</body>
</html>
Nothing unusual here. We have our main stylesheet (we will go back to it in the next section) and a number of JavaScript source files before the closing head tag.
The #icarousel div will hold the slides. The id is required in order to be recognized by icarousel.js.
<div id="icarousel"> <!-- The Slides Will Go Here --> </div>
With this plugin, we can create smooth CSS3 transitions between the slides of our slider. To do this, we have to instruct iCarousel on how to orient the slides. This is easy to do - we will use data attributes on the slides.
You can see the markup for the slides below:
<div class="slide"> <img src="photos/photo1.jpg" /> </div> <div class="slide" data-pausetime="1000"> <img src="photos/photo2.jpg" /> </div> <div class="slide" data-easing="easeInOutQuint"> <img src="photos/photo3.jpg" /> </div>
I'm using four CSS files in this sample. The first one contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The second file contains all of the specific stylings for the page.
The third file contains all of the icarousel general stylings. The file is separated into sections using:
/* === Preloader Section === */
div#icarousel div#iCarousel-preloader {
some styles
}
div#icarousel div#iCarousel-preloader div {
some styles
}
/* === Slides Section === */
div#icarousel div.slide {
some styles
}
/* === Control Navigation Section === */
/* = General = */
div#icarousel a.iCarouselNav {
some styles
}
/* = Next Button = */
div#icarousel a#iCarouselPrev {
some styles
}
/* = Previous Button = */
div#icarousel a#iCarouselPrev {
some styles
}
/* === Playback === */
/* = General = */
div#icarousel div#iCarousel-timer {
some styles
}
/* = When its playing = */
div#icarousel div#iCarousel-timer.play {
some styles
}
/* = When its paused = */
div#icarousel div#iCarousel-timer.pause {
some styles
}
Any images that are placed within the slides section can be customizable. If you would like to edit the display of these images, find the following section in the style sheet:
div#icarousel div.slide img {
change styles here
}
This script imports four Javascript files.
For start iCarousel add the following section in the javascript tag:
$(document).ready(function(){
$('#icarousel').iCarousel();
});
Many options available for customize the iCarousel:
$(document).ready(function(){
$('#icarousel').iCarousel({
easing: 'ease-in-out', // Easing timing (custom cubic-bezier function is acceptable)
slides: 3, // How many slides will be shown (Must be an odd number)
make3D: true, // To Enable or Disable 3D effect.
perspective: 35, // The 3D perspective option. (Min 0 & Max 100);
animationSpeed: 500, // Slide transition speed (Microsecond)
pauseTime: 5000, // How long each slide will show (Microsecond)
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Previous navigation
autoPlay: true, // To Enable or Disable the autoplay
keyboardNav: true, // To Enable or Disable the keyboard navigation
touchNav: true, // To Enable or Disable the touch navigation
mouseWheel: true, // To Enable or Disable the mousewheel navigation
pauseOnHover: false, // To Enable or Disable the carousel when mouse come over it
randomStart: false, // Start on a random slide
slidesSpace: 'auto', // Spaces between slides
slidesTopSpace: 'auto', // Top Space for the slides
direction: 'rtl', // Carousel direction when change (right-to-left) set like: 'rtl'
timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar"
timerBg: '#000', // Timer background
timerColor: '#EEE', // Timer color
timerOpacity: 0.5, // Timer opacity
timerDiameter: 30, // Timer diameter
timerPadding: 4, // Timer padding
timerStroke: 3, // Timer stroke width
timerBarStroke: 1, // Timer Bar stroke width
timerBarStrokeColor: '#EEE', // Timer Bar stroke color
timerBarStrokeStyle: 'solid', // Timer Bar stroke style
timerBarStrokeRadius: 4, // Timer Bar stroke radius
timerPosition: 'top-right', // Timer position (top,middle,bottom)-(left-center-right) set like: 'middle-center'
timerX: 10, // Timer X position threshold
timerY: 10, // Timer Y position threshold
nextLabel: "Next", // To set the string of the next button (Multilanguage use)
previousLabel: "Previous", // To set the string of the previous button (Multilanguage use)
playLabel: "Play", // To set the string of the play button (Multilanguage use)
pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use)
onBeforeChange: function(){}, // Triggers before a slide change
onAfterChange: function(){}, // Triggers after a slide change
onLastSlide: function(){}, // Triggers when last slide is shown
onAfterLoad: function(){}, // Triggers when carousel has loaded
onPause: function(){}, // Triggers when carousel has paused
onPlay: function(){} // Triggers when carousel has played
});
});
How to pause and play the carousel?
$('#icarousel').trigger('iCarousel:pause'); //Stop the Slider
$('#icarousel').trigger('iCarousel:play'); //Start the Slider
How to change slide?
$('#icarousel').trigger('iCarousel:goSlide', [2]); //Go to slide 2
How to next and previous the slider?
$('#icarousel').trigger('iCarousel:previous'); //Go to previous slide
$('#icarousel').trigger('iCarousel:next'); //Go to next slide
How to set a random starting slide?
var total = $('#icarousel').children().length;
var rand = Math.floor(Math.random()*total);
$('#icarousel').iCarousel({
startSlide:rand
});
Version 1.2.2
2012-07-04 Hemn Chawroka * Fixed jQuery fallback animation bugs. * Fixed some bugs.
Version 1.2
2012-07-04 Hemn Chawroka * Added jQuery fallback animation. * Added easing for jQuery fallback animation. * Fixed some bugs.
Version 1.1
2012-06-15 Hemn Chawroka * Added mousewheel navigation. * Added 3D or 2D method. * Added 3D perpective option. * Fixed some bugs. * Added slides top space option. * Added easing option. * Added easing timing methods. * Added each slide pausetime option. * Added scroll direction option.
Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script.
Hemn Chawroka