Hi,

Is there a way to make the nectar slider advance to the next slide when the video used for the video background ends?

I've tried adding some JS (outputted below the slider in a Raw JS block) to listen for the 'ended' event on the HTML5 video and trigger a click event on the next slide button when the event fires, but the 'ended' event never fires.

Perhaps I'm being way too complicated and there's an option for it somewhere that I've missed.

Thanks in advance for any help!

Hi Tahir,

It there any chance the theme will support it in a future update? Alternatively, could you suggest how I could do it with custom code?

I'd rather not use the Revolution Slider as I love how simple and effective the Nectar Slider is and how well it is integrated into the theme.

Thanks!

I'm not sure why you have linked me to my other ticket...? Is it because the answer is the same, that this will be supported in the update in about two weeks? Otherwise, it's an unrelated question...

Brilliant :) Thanks!

Hi Tahir,

I've updated to v4.0.1 and looked for the option that you said would be present to make the Nectar Slider move on to the next slide at the end of the video, but I can't find it anywhere. Could you tell me how I do it?

Thanks!

I spent a few hours working on this and have come up with a solution that works. I'll post it here in case anybody else is looking for the same thing.

It's not the most elegant thing in the world, but it works. I couldn't get the 'ended' event to fire on the video (I tried for a long time!) so I ended up just checking for when the current time is the same as the duration of the video.

The following code is outputted below the slider in a raw JS block:

<script type='text/javascript'>
  jQuery(window).load(function () { //will run on page load (i.e. once the video is fully buffered)

    var video = jQuery('.my-video-slide video').first()[0]; //note: I have added the class 'my-video-slide' to my video slide in the slide builder

    jQuery(video).prop('loop', false);

    var duration = video.duration * 1000;
    var currentTime = video.currentTime * 1000;
    var timeBeforeEndToStartCheckingForEnd = 2000;

    setTimeout(function () {
      var interval = setInterval(function () {
        if (duration - video.currentTime * 1000 <= 0) {
          jQuery('.slider-next').click();
          clearInterval(interval);
        }
      }, 100);
    }, (duration - currentTime - timeBeforeEndToStartCheckingForEnd))

  });
</script>

Hope this helps someone!