1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/demo1.css" />
<!-- JavaScript includes -->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ipresenter.encoded.js"></script>
2. HTML
<!-- BEGIN #ipresenter element container -->
<div id="ipresenter">
<!-- The Slides Will Go Here -->
</div>
<!-- END #ipresenter element container -->
3. JAVASCRIPT
$(document).ready(function(){
$('#ipresenter').iPresenter();
});
4. OPTIONS
$(document).ready(function(){
$('#ipresenter').iPresenter({
easing: 'ease-in-out', // Easing timing (custom cubic-bezier function is acceptable)
autoPlay: true, // To Enable or Disable the autoplay
replay: true, // To repeat all steps from beginning
animSpeed: 1000, // To set the speed of the switch animation (Microsecond)
pauseTime: 5000, // To set the time of the pause between steps (Microsecond)
directionNav: true, // Next & Previous navigation
directionNavHoverOpacity: 0.6, // Fade on hover
controlNav: true, // 1,2,3,4... navigation
controlNavNextPrev: true, // previous,next navigation
controlNavHoverOpacity: 0.6, // Navigation fade on hover
controlNavThumbs: false, // Show thumbs navigation
controlNavTooltip: true, // Show thumbs Tooltip
keyboardNav: true, // To Enable or Disable the keyboard navigation
pauseOnHover: false, // To Enable or Disable the slideshow when mouse come over it
itemsOpacity: 0.4, // To set the value of the opacity for the steps
randomStart: false, // Start on a random step
startStep: 0, // Set starting Step (0 index)
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
timerPosition: 'top-right', // Timer position (top,middle,bottom)-(left-center-right) set like: 'middle-center'
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 step change
onAfterChange: function(){}, // Triggers after a step change
onLastStep: function(){}, // Triggers when last step is shown
onAfterLoad: function(){}, // Triggers when slider has loaded
onPause: function(){}, // Triggers when slider has paused
onPlay: function(){} // Triggers when slider has played
});
});
With this plugin, we can create smooth CSS3 transitions between the slides of our showcase. To do this, we have to instruct iPresenter on how to orient the slides. This is easy to do - we will use data attributes on the step divs. These attributes are translated into real CSS3 transformations by the plugin, depending on the current browser, and affect the slide.
-
data-easing - easing timing function (custom cubic-bezier function is acceptable):
-
- linear
-
- ease
-
- ease-in
-
- ease-out
-
- ease-in-out
-
- ease-out-in
-
- easeInQuad
-
- easeOutQuad
-
- easeInOutQuad
-
- easeInCubic
-
- easeOutCubic
-
- easeInOutCubic
-
- easeInQuart
-
- easeOutQuart
-
- easeInOutQuart
-
- easeInQuint
-
- easeOutQuint
-
- easeInOutQuint
-
- easeInSine
-
- easeOutSine
-
- easeInOutSine
-
- easeInExpo
-
- easeOutExpo
-
- easeInOutExpo
-
- easeInCirc
-
- easeOutCirc
-
- easeInOutCirc
-
- easeInBack
-
- easeOutBack
-
- easeInOutBack
-
data-pausetime - how long the slide will show;
-
data-x, data-y, data-z will move the slide on the screen in 3D space;
-
data-rotate, data-rotate-x, data-rotate-y, data-rotate-z rotate the element around the specified axis (in degrees);
-
data-scale - enlarges or shrinks the slide;
-
data-thumbnail - the url of the thumbnail;
JS Tutorial
