sliderX is a jQuery slider plugin that keeps the image layer and HTML content separate, so captions, buttons, navigation, and animation controls stay editable without changing the slide markup itself.
This local page uses the same documentation-first layout as your alertX template, but only for sliderX content. The live demo below updates the same slider instance in place and the generated configuration block refreshes as you change each option.
Use the controls below to test animation mode, autoplay, button placement, indicator style,
and transition timing. The selector only shows animation files that were declared in
window.sliderXAssetConfig.
The configuration block below updates as you change the live controls:
Declare the animation modules you want to ship, keep your slide markup simple, then initialize the plugin once. The demo follows the same structure shown here.
<script>
window.sliderXAssetConfig = {
animations: {
instant: true,
swipe: true,
shift: true,
slidez: true
},
extraStyles: ["assets/css/demo.css"],
extraScripts: ["assets/js/demo.js"]
};
</script>
<script src="assets/js/sliderx.asset-loader.js"></script>$("#sliderx-showcase").sliderX({
indicatorType: "circles",
indicatorChrome: true,
navInside: true,
buttonsInside: true,
buttonsPosition: "center",
animation: "cubeover",
animationDuration: 1000,
autoPlay: true,
interval: 7000,
pauseOnHover: true
});The current local demo loads the following animation modules. Only these names are shown in the animation selector and only these CSS / JS files are loaded by the asset loader.
| animation | summary | files |
|---|---|---|
| instant | Immediate slide switch with no transition. | instant.css / instant.js |
| slidex | Horizontal strip movement across the slide row. | slidex.css / slidex.js |
| slidey | Vertical strip movement through stacked slides. | slidey.css / slidey.js |
| slidez | Zoom handoff between the current and target slides. | slidez.css / slidez.js |
| slidefade | Short directional move combined with a fade. | slidefade.css / slidefade.js |
| shift | Directional push with the current image shrinking away. | shift.css / shift.js |
| swipe | 3D carousel basic transition with rotating side cards. | swipe.css / swipe.js |
| lines | Sampled color bars cover then reveal the next slide. | lines.css / lines.js |
| circles | Dribbles-style sampled circles flood then uncover the scene. | circles.css / circles.js |
| collage | Canvas-driven collage travel with blurred backdrop. | collage.css / collage.js |
| hypno | Bubbles-style concentric reveal built from sampled colors. | hypno.css / hypno.js |
| tiles | Brick-style 3D tile flip transition. | tiles.css / tiles.js |
| thumbs | Photo-deck collapse and expand transition. | thumbs.css / thumbs.js |
| album | Book-style half-page turn over the next image. | album.css / album.js |
| squares | Grid-based reveal through staggered tile patterns. | squares.css / squares.js |
| slices | Vertical slice variants with staggered strip timing. | slices.css / slices.js |
| blast | Overflow mosaic burst beyond the slider frame. | blast.css / blast.js |
| open | TURN-style hinge opening from rotating edges. | open.css / open.js |
| curtains | Louver-style vertical curtain flip. | curtains.css / curtains.js |
| cubeover | Cube-face rotation between slides. | cubeover.css / cubeover.js |
| parallax | Layered movement with faster content and slower background. | parallax.css / parallax.js |
| revealx | Horizontal wipe reveal. | revealx.css / revealx.js |
| revealy | Vertical wipe reveal. | revealy.css / revealy.js |
The table below lists the runtime options supported by the plugin. These same keys can be used
in the initial constructor or passed again through updateOptions.
| option | values | default | description |
|---|---|---|---|
| startIndex | number | 0 | Initial active slide index before the slider is first rendered. |
| indicatorType | none, circles, squares, underscores, pill | circles | Chooses which indicator shape is rendered in the navigation area. |
| indicatorChrome | true, false | true | Toggles the framed background around inside indicators. |
| navInside | true, false | false | Places the indicator navigation inside or outside the viewport. |
| buttonsInside | true, false | false | Places the previous / next buttons inside or outside the viewport. |
| buttonsPosition | top, center, bottom | center | Controls the vertical position of inside previous / next buttons. |
| animation | any loaded animation name | instant | Sets the current transition mode. Only declared animation files can be used. |
| animationDuration | number in ms, minimum 250 | 820 | Duration for animated transitions. Instant mode ignores it. |
| autoPlay | true, false | false | Automatically advances the slider after the configured interval. |
| interval | number in ms, minimum 2500 | 6500 | Delay between autoplay advances. |
| pauseOnHover | true, false | true | Pauses autoplay while the slider is hovered. |
SliderX exposes a small set of direct runtime methods through the jQuery plugin instance.
| method | arguments | description |
|---|---|---|
| next | none | Moves to the next slide. |
| prev | none | Moves to the previous slide. |
| goTo | index, directionHint | Moves to a specific slide index and optionally forces next / prev direction. |
| setIndicatorType | indicatorType | Updates the active indicator style and rebuilds the navigation. |
| setIndicatorChrome | boolean | Toggles the inside navigation frame. |
| setNavInside | boolean | Moves the indicator navigation inside or outside the viewport. |
| setButtonsInside | boolean | Moves previous / next buttons inside or outside the viewport. |
| setButtonsPosition | top, center, bottom | Changes the vertical alignment of inside previous / next buttons. |
| setAnimation | animationName | Switches to a different loaded animation module. |
| setAnimationDuration | number in ms | Changes the transition duration at runtime. |
| updateOptions | options object | Applies multiple option changes at once and rerenders the slider. |
| destroy | none | Stops timers, unbinds events, and removes the stored plugin instance. |