RESPONSIVE CSS FRAMEWORK
image
Coastal summer home
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_01.jpg
image
Perfect day at the beach house
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_02.jpg
image
Vintage kitchen on the countryside
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_03.jpg
image
Pool house overshadowed by palm trees
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_04.jpg
image
Orchids on the dining room table
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_05.jpg
image
Charming desk
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_06.jpg
image
The grande, the tall and the beautiful
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_07.jpg
image
Waiting room at the castle
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_08.jpg
image
Good morning, kitchen!
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_09.jpg
image
Sunlit luxury town house
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_10.jpg
image
Dreamy bedroom details
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_11.jpg
image
Luxury resort away from the world
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_12.jpg
Credits:
M.James Northen http://www.jnorthen.com

Image & content slider

Callback functions

Propertyent property Description
init This callback function is called after the slider has been initialized.
contentLoadStart(eventObj) The callback function is called before the content of a slide is starting to load. The function receives an object containing information about the slide that triggered the event.

Note! In case of HTML slides the slider calls the callback function before setting the contents, so please make sure that you are not referencing any elements of the slide at this point.
contentLoadEnd(eventObj) The callback function is called after a slide has finished loading the content.

Note! In case of HTML slides the slider calls the callback function after all the HTML elements have been created on the slide but it is possible that the content of those elements have not yet loaded. At this point you can use JavaScript to access the elements of the slide.
contentLoadError(eventObj) The callback function is called when an image slide fails to load the image. The object passed as parameter contains information about that slide, so you know which image did not load.
contentShow(eventObj) The callback function is called after a slide has been displayed (at the end of the transition).
contentHide(eventObj) The callback function is called before a slide starts hiding (at the beginning of the transition).
slideClick(eventObj) The callback function is called whenever the user clicks or taps on the surface of the slide. In case of image slides that have a target URL, that URL will open automatically.

Note! On mobile devices the first tap displays the controls (if they were hidden) and the second tap opens the attached URL.
slideshowStart The callback function is called when the slideshow starts, either automatically (autoSlideshow = true) or when the user clicks on the play button.
slideshowStop The callback function is called when the slideshow stops, either automatically (when the slideshow reaches the last slide and loopContent = false) or when the user clicks on the pause button.
The object passed to the callback functions contains information about the event and the slide that triggered the event and has the following structure:
eventObj.slide - an object containing the information about the slide
eventObj.slide.index - the index of the slide that triggered the event
eventObj.slide.type - the type of the slide
eventObj.slide.title - the title of the slide
eventObj.slide.description - the description for the slide
eventObj.slide.content - the content of the slide: either the URL of an image (if type is image) or the HTML content of the slide (if type is html)
eventObj.slide.targetURL - the url attached to the slide
eventObj.slide.window - the window where the URL will open