Get It Now
  • API showcase
    API motion on a fresh slider state
    Use the method buttons below to execute real public slider API commands.
  • API showcase
    Navigation methods should react immediately
    Every click reloads a clean slider state first, then runs the chosen method.
  • API showcase
    Autoplay methods should stay visible
    Progress stays on so autoplay commands are easy to verify visually.
  • API showcase
    goTo methods should land predictably
    The same slide set is reused so API behavior is easier to compare.
  • API showcase
    Control skins randomize on every action
    Control style, control icon, and dots style are randomized every time.
  • API showcase
    Dots and icons change with each command
    This exposes UI combinations while you test the runtime methods.
  • API showcase
    Full Width Scoped stays fixed for comparison
    The layout stays locked to fullWidthScoped for consistency.

API method selection

Trigger a public method

Each button runs one real public API method on the current slider instance.

Runtime controls

API

Trigger real ZoroSlider public methods on a clean slider state.

API reference

Public methods and events

Use the public API to control slide navigation, autoplay, layers, media, layout refresh, and runtime option access.

Public methods

next()
previous()
goTo(index)
goToFirst()
goToLast()
getCurrentIndex()
getPreviousIndex()
getSlideCount()
getCurrentSlide()
getSlide(index)
isAnimating()
isPaused()
isAutoplayEnabled()
startAutoplay()
pauseAutoplay()
resumeAutoplay()
stopAutoplay()
restartAutoplay()
destroy()
refresh()
update()
showLayer(layer)
hideLayer(layer)
toggleLayer(layer)
removeLayer(layer)
addLayer(configOrElement)
animateLayerIn(layer, delay)
animateLayerOut(layer, delay)
toggleLayerAnimation(layer, inDelay, outDelay)
triggerLayerClick(layer)
playMedia(selectorOrLayer)
pauseMedia(selectorOrLayer)
stopMedia(selectorOrLayer)
muteMedia(selectorOrLayer)
unmuteMedia(selectorOrLayer)
setMediaVolume(selectorOrLayer, volume)
refreshLayout()
setLayout(layout)
getLayout()
getDevice()
scrollToSliderTop(offset)
scrollToSliderBottom(offset)
scrollToPageTop(offset)
scrollToPageBottom(offset)
scrollToElement(element, offset)
getOption(name)
setOption(name, value)
getOptions()
getSlides()
getApi()

Example

const api = $('#my-slider').data('zorosliderapi');
api.goTo(3);
api.pauseAutoplay();

Event groups

ZoroSlider emits zoroslider:* events for lifecycle, navigation, autoplay, layers, transitions, responsive changes, carousel movement, and media state.

Lifecycle events

  • zoroslider:init
  • zoroslider:ready
  • zoroslider:destroy
  • zoroslider:error

Slide navigation events

  • zoroslider:before-slide-change
  • zoroslider:slide-change-start
  • zoroslider:slide-change
  • zoroslider:slide-change-end
  • zoroslider:slide-change-cancel

Autoplay events

  • zoroslider:autoplay-start
  • zoroslider:autoplay-stop
  • zoroslider:autoplay-pause
  • zoroslider:autoplay-resume
  • zoroslider:autoplay-progress
  • zoroslider:autoplay-complete

Interaction events

  • zoroslider:next
  • zoroslider:previous
  • zoroslider:slide-to
  • zoroslider:swipe
  • zoroslider:keyboard-navigation
  • zoroslider:control-click
  • zoroslider:dot-click
  • zoroslider:thumb-click

Layer events

  • zoroslider:layer-before-in
  • zoroslider:layer-after-in
  • zoroslider:layer-before-out
  • zoroslider:layer-after-out
  • zoroslider:layer-click
  • zoroslider:layer-show
  • zoroslider:layer-hide

Transition events

  • zoroslider:transition-start
  • zoroslider:transition-end
  • zoroslider:transition-cancel

Responsive events

  • zoroslider:resize
  • zoroslider:layout-change
  • zoroslider:device-change

Carousel events

  • zoroslider:carousel-move
  • zoroslider:carousel-moved
  • zoroslider:carousel-item-click

Media events

  • zoroslider:media-ready
  • zoroslider:media-play
  • zoroslider:media-playing
  • zoroslider:media-pause
  • zoroslider:media-ended
  • zoroslider:media-error
  • zoroslider:media-time-update
  • zoroslider:media-seeked
  • zoroslider:media-volume-change
  • zoroslider:video-enter-fullscreen
  • zoroslider:video-exit-fullscreen

Listening for events

$('#my-slider').on('zoroslider:after-slide-change', (e) => {
  const detail = e.originalEvent.detail;
  console.log(detail.currentIndex);
});