SlideShow Responsive easy to use slider with awesome 3D and 2D transition effects.
To include a video into your slideshow you must put an iframe into one of your slides.
-4 type slideshow and one advertise responsive.
-Responsive design.
-Adjustable transition speed.
-Auto slideshow with pause on hover.
-Compatible with all major browsers (IE7-IE8 and above , Chrome, Firefox, Safari and Opera)
Available Parameters –
The iView Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:
- strips: 20, // Number of strips for strip animations
- blockCols: 10, // Number of block columns for block animations
- blockRows: 5, // Number of block rows for block animations
- captionSpeed: 500, // Caption transition speed
- captionEasing: ‘easeInOutSine’, // Caption transition easing effect
- captionOpacity: 1, // Caption opacity
- animationSpeed: 500, // Slide transition speed
- pauseTime: 5000, // How long each slide will show
- startSlide: 0, // Set starting Slide (0 index)
- 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 tooltip image previewer
- autoAdvance: true, // Force auto transitions
- keyboardNav: true, // Use left & right arrows
- touchNav: true, // Use Touch swipe to change slides
- pauseOnHover: false, // Stop slider while hovering
- 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)
- closeLabel: “Close”, // To set the string of the close button (Multilanguage use)
- randomStart: false, // Start on a random slide
- 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
- timerX: 10, // Timer X position threshold
- timerY: 10, // Timer Y position threshold
- tooltipX: 5, // Tooltip X position threshold
- tooltipY: -5, // Tooltip Y position threshold
- onBeforeChange: function(){}, // Triggers before a slide transition
- onAfterChange: function(){}, // Triggers after a slide transition
- onSlideshowEnd: function(){}, // Triggers after all slides have been shown
- onLastSlide: function(){}, // Triggers when last slide is shown
- onAfterLoad: function(){}, // Triggers when slider has loaded
- onPause: function(){}, // Triggers when slider has paused
- onPlay: function(){} // Triggers when slider has played
The effect parameter can be any of the following:
- random
- strip-down-right
- strip-down-left
- strip-up-right
- strip-up-left
- strip-up-down
- strip-up-down-left
- strip-left-right
- strip-left-right-down
- slide-in-right
- slide-in-left
- slide-in-up
- slide-in-down
- left-curtain
- right-curtain
- top-curtain
- bottom-curtain
- fade
- block-random
- block-fade
- block-fade-reverse
- block-expand
- block-expand-reverse
- block-expand-random
- block-drop-random
- zigzag-top
- zigzag-bottom
- zigzag-grow-top
- zigzag-grow-bottom
- zigzag-drop-top
- zigzag-drop-bottom
- strip-left-fade
- strip-right-fade
- strip-top-fade
- strip-bottom-fade