Image Slider Transition Effects

demos: 012345678

Transition Effects:    

Options:   Series ?
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
You can input desired effects directly (for example: 6,15,9,16)
Current Setting:
effect: "series1",
effectRandom: false
Apply
effect:   ?
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 (including commercial).

Visit JavaScript Image Slider for more information.