The
onChange
event
handler/ Embedding YouTube videos
The onChange event handler, defined as an option within the
initialization code featuredcontentslider.init()
, lets you execute
code whenever the Slider changes slides, including when the very first slide
slides in automatically on page load. The event handler has the syntax:
onChange: function(previndex,
curindex, contentdivs){
//custom code here
}
When the Slider first loads on the page, the first two parameters point to
the same slide. The index count starts at 0, meaning 0 indicates the 1st slide,
1 the second etc. The third parameter, contentdivs
, is an array referencing all of the slides within the
Slider. Putting it all together, the below simple example logs to the browser
console the contents of the current slide if the previous and current slide are
not the same (this is not the first slide shown when the page loads):
onChange: function(previndex,
curindex, contentdivs){
if (previndex != curindex) // if this isn't first slide shown when page
loads
console.log(contentdivs[curindex].innerHTML)
}
The code:
contentdivs[index]
lets you access a particular slide within the slider based on its index (where 0=1st slide, 1=2nd slide etc).
Embedding YouTube videos with the help of the onChange
event
handler
Embedding Youtube videos inside sliders is all fine and dandy until the user
decides to play a video- when the user changes slides, what happens typically is
that the video in the previous slide will continue to play, creating an audio
and visual mess of increasing proportions. Well, using the onChange
event
handler of Featured Content Slider, along with
YouTube's API that lets us use JavaScript to dynamically manipulate a YouTube video, we can take care of this pesky issue once and for all.
The below complete example demonstrates a Slider with 4 slides, 2 of them containing a Youtube video. If the user plays a video and moves to another slide, the Slider will pause the previous slide's video if there exists one:
Full HTML Source: