How make slider work only if is in viewport? - javascript

Hello!
I would to ask, how can I make this slider to work only if slider is on the viewport?
I use this slider: enter link description here
Thanks for your help!

Their Javascript does not support it. They do not return the interval that is created, so it cannot be cleared (this is how they pause it). Nor do they have a pause function, except for the one on hover. You will need to update their Javascript to support the ability to pause and play.

Related

With reveal.js, how can I make slides change upon completion of embedded media?

I am using reveal.js to make a relatively simple slideshow. I am not using basement levels, fragments, etc. Just several slides with a few bit of text and images, with audio on some slides, and video on others.
I'd really like to have the slide move on to the next upon the completion of the media. I would like it to feel as though there was someone changing slides as they would do giving this presentation in a live setting.
There is a variety of run times, some are only 0:15 and some are up to 4 minutes.
How can I accomplish this?
In general, bind a listener to the completion event and advance the slide.
video.addEventListener('ended', function() {
Reveal.next()
});
I think the audio-slideshow plugin does exactly what you are looking for.

Using rangeslider.js for an HTML5 audio time scrubber

I am digging into the finer points of Andre Ruffert's rangeslider.js and I am having difficulty into incorporating his code into controlling and reacting to a simple HTML5 audio element.
I see that you can programmatically change the value of the slider with the click of a button, but how would I link the audio to update automatically with the audio as it plays, and modify the audio by clicking and dragging the thumb of the slider?
I've made a working demo here: http://jsfiddle.net/alan0xd7/79ff562k/
This uses the timeupdate event to update the range slider.
However there are some quirks when you try to change the time while it is playing - sometimes it snaps back to where it was. I believe this is some sort of race condition, because as you are sliding the track, the timeupdate event would fire and change it back to the current time. To make it work properly, you probably need to introduce some additional logic like pausing the audio while the slider is being dragged.
Hope this helps!

Unable to restart custom slideshow(Vegas Background Slideshow) after reaching the end

I implemented the vegas bg slideshow successfully in my wordpress template. Everything works fine besides that the slideshow does not loop.
It stops with the last image in queue. Is that how it's supposed to be?
I expected it to loop by default. I can not find any documentation about a loop setting.
Does anyone know a workaround to loop the slideshow? Like to catch a onfinished event...
Here is the link to the page.
Any hint is welcome and appreciated.
Yes, I solved the problem. Make sure to set poster=no. If poster is set to yes the plugin stops looping and sets the last slide as a poster. Its kind of confusing...
hope that helps
cheers

Adding slides to beginning of slideshow

Does anyone know a jQuery slider that has solid callback support, and can allow me to add a slide to the beginning of a slideshow while a user is on the page without disrupting the slide the user is on? wootheme's flexslider has addSlide() but it handles this very poorly if you try to add something to the beginning (position 0) Swiper http://www.idangero.us/sliders/swiper/ has a prepend() function, but as you can see in their demo, whenever you prepend it jumps the current slide to the one before.
I need to add content to the beginning of a slider with touch functionality like these two, but I need that to be invisibly added without messing up or jumping around the current slider position. Can anyone suggest one that they like? Obviously I prefer one that is free and allows me to use multiple places like a Creative Commons license.
For slideshows, I really recommend jQuery cycle plugin.
http://jquery.malsup.com/cycle/

How to make a slider stop when video is playing?

I have this website which has a slider in the middle of the page. I put a video in the slider but the problem is when I play the video I need the slider to stop its effect so the video can play. Any ideas how to make this happen.
Here is the website it is on.
http://flamingoroadchurch.com.previewdns.com/
You need to attach an event listener to that video somehow. Have you looked at Vimeo's js api?
http://vimeo.com/api/docs/moogaloop
You may want to take a close look at that js_onLoad function.
p.s.: You might get better answers around here if you accepted one. You do this by clicking the little check mark next to an answer.

Categories

Resources