Image Slider Transition Effects



Demos: 012 345 678

Transition Effects

Apply
Options:   Series ? javascript image slider effects The series1 and series2 in the option list are two preset collection of effects.

series1: 6, 8, 15, 2, 5, 14, 13, 3, 7, 4, 14, 1, 13, 15
(Effects 13, 14, 15 occured twice so that they have more chances to play)

series2: all effects from 1 to 17
effect: customize image slider transition effects javascript image slider effects You can input desired effects directly (for example: 6,15,9,16)
effectRandom:

You can download the source code of this slider from the JavaScript Image Slider page.

Transition Effects

Transitional effects are customizable by the effect and effectRandom options in the js-image-slider.js. For example:

var sliderOptions = { sliderId: "slider", effect: "17,13,1", effectRandom: true, pauseTime: 2800, transitionTime: 1200, slices: 14, boxes: 8, hoverPause: 1, autoAdvance: true, captionOpacity: 0.4, captionEffect: "fade", thumbnailsWrapperId: "thumbs", m: false, license: "mylicense" };
  • Preset custom effects can be used, such as: effect:"series1"
  • A single effect is allowed. For example: effect:"13"

Navigation Bullets

Navigation bullets are created automatically by the script of the image slider.

The CSS class selector .navBulletsWrapper can be used to change the navigation bullets' positon and style.

If you don't need the Navigation Bullets, just hide them via CSS:
div.navBulletsWrapper {display:none;}

Free to Use

The image slider shown in this demo is for free.

Visit JavaScript Image Slider for more information.