Hooks
Triggered by the main cycle:
- view_init
the first function that gets called as soon as the slider initializes. - show_slide
called when the controller requests a new slide to appear. - transition_in
gets called after show_slide. The code that deals with the way a slide transitions in goes here. - transition_out
gets called after show_slide. The code that deals with the way a slide transitions out goes here. - transition_complete
gets called when the slide has finished transitioning, or when the transition delay is over. - busy
gets called by show_slide and locks the slider so it won't accept any events until the transition is over. - update_tickers
gets called by show_slide. Code related to the ticker goes here. - update_pagination
gets called by show_slide. Code related to the pagination goes here. - start_loading
gets called by show_slide. Code related to the loader goes here. - loading_complete
gets called by start_loading just before the next show_slide call.
Triggered by the user:
- arrow_next_click
gets called when the user clicks the "next" arrow. - arrow_prev_click
gets called when the user clicks the "previous" arrow. - ticker_click
gets called when the user clicks on one of the tickers. - play_pause_click
gets called when the user clicks the "play/pause" button.
Class Names
Class identifier
slider_wrap
slide
arrow
arrow_next
arrow_prev
pagination
pagination_current
pagination_last
play_pause
loading_bar
progress_bar
ticker_wrap
ticker
active_ticker
inner_content_box
outer_content_box
outer_contents
Default value
sliderjs-wrap
sliderjs-slide
sliderjs-arrow
sliderjs-arrow-next
sliderjs-arrow-prev
sliderjs-pagination
sliderjs-current-slide
sliderjs-last-slide
sliderjs-play-pause
sliderjs-loading-bar
sliderjs-loading-bar-progress
sliderjs-ticker-wrap
sliderjs-ticker
sliderjs-active-ticker
sliderjs-inner-content-box
sliderjs-outer-content-box
outer-contents
API
- id : the unique ID of the slider
- current_slide : jQuery reference to the slide that is currently active. Have in mind, that in the transition_in hook for example, this will point to the slide that is supposed to appear!
- next_slide : jQuery reference to the slide after the active one;
- prev_slide : jQuery reference to the slide that sits before the active one. IMPORTANT: this does NOT point to the last active slide, but to the one that sits just before the currently active one
- breadcrum_slide : jQuery reference to the last active slide. Example: if we are at slide 4 and the user clicks the ticker, pointing to slide 1, the current_slide property will point to 4, and breadcrum_slide will point to 1
- first_slide : jQuery reference to the first slide
- last_slide : jQuery reference to the last slide
- slides : an array containing jQuery references to all slides
- current_slide_index : the index of the currently active slide
- next_slide_index : the index of the slide that’s supposed to come after the currently active one
- prev_slide_index : the index of the slide that sits before the currently active one. NOT the same as breadcrum_slide!
- breadcrum_slide_index : the index of the last active slide
- first_slide_index : the index of the first slide
- last_slide_index : the index of the last slide
- grid_rows : two-dimentional array with jQuery references to all rows in the grid and their elements. For example, you would get the 8th grid piece from the 3rd row like this: grid_rows[3][8]
- grid_cols : two-dimentional array with jQuery references to all columns in the grid and their elements. For example, you would get the 6th grid piece from the 2rd row like this: grid_rows[2][6]
- rows : the total number of rows in the grid
- cols : the total number of columns in the grid
- inner_content_box : jQuery reference to the current slide’s inner content box.
- inner_content_boxes : array with jQuery references to all slides’ inner content boxes
- outer_content_box : jQuery reference to the element that holds the outer contents
- outer_contents : array containing jQuery references to all slides’ outer contents
- current_outer_content : jQuery reference to the element which has the current slide’s outer contents
- next_outer_content : jQuery reference to the element which has the next slide’s outer contents
- prev_outer_content : jQuery reference to the element which has the previous slide’s outer contents
- breadcrum_outer_content : jQuery reference to the element which has the last active slide’s outer contents
- first_outer_content : jQuery reference to the element which has the first slide’s outer contents
- last_outer_content : jQuery reference to the element which has the last slide’s outer contents
- active_ticker : jQuery reference to the currently active ticker element
- prev_ticker : jQuery reference to the ticker element before the currently active one
- next_ticker : jQuery reference to the ticker element after the currently active one
- first_ticker : jQuery reference to the first ticker element
- last_ticker : jQuery reference to the first ticker element
- breadcrum_ticker : jQuery reference to the last active ticker element
- loader_wrap : jQuery reference to the element which holds the loading bar (if it’s a bar at all)
- pagination_current_slide : the number of the current slide
- pagination_slides_count : the count of all slides
- play_pause_button : jQuery reference to the play/pause button
- arrow_next : jQuery reference to the “next” arrow
- arrow_prev : jQuery reference to the “prev” arrow
- state_play : the current play state of the slider. Either true or false
- z_move_to_top : a method, which accepts a slide’s index as an argument and moves it on top of all slides.