How do I stop the carousel from carrying on to the next slide before video is done

Melody Scott
Melody Scott used Ask the Experts™
on
Hi, all, I got the video into the slide show here: http://dev.magickitchen.com/

And I got a play button on it with this fiddle: https://codepen.io/chrisnager/pen/jPrJgQ 

But how do I stop the carousel from carrying on to the next slide before it's done? I don't mind if people click the next button, but I'd like it to stay on the video if they don't select that.
 Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Usually a carousel has the option to turn auto off - which carousel are you using (your first link requires a login)

Author

Commented:
oh, sorry about that. Bootstrap js carousel, I'll have to get the server admin to add this login back in, I'll let you know when that's in place.

user name: pepe
PW: BobTheBuilder45!!

Author

Commented:
I added: data-interval: false to the div and it seems to be working now, thanks! I'm just going to wait to see if it's working for others before closing.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Oh, guess I did close it by selecting your answer as a solution.. but I was wrong about data-interval fixing the issue, unfortunately.

Author

Commented:
OK, I'll let you know when the user name and password are back in place.

Here's what I've done: Removed  data-ride="carousel" from:
 <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">

That means the whole video shows, but then someone has to press the indicators to see each of the following slides.

Ideally, we'd like the whole video to show (Unless someone presses the next slide indicator), and once the video is finished, the rest of the slideshow plays. It's also in place on our live site without the video: https://www.magickitchen.com.

Thanks again.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
once the video is finished, the rest of the slideshow plays
This is not going to be natively supported - you are going to have write your own code to do this.

In principle you would need to do this.

1. Bind to the change slide event of the carousel
2. Check the current slide - if it is a video slide turn off automatic transition otherwise turn automatic transition back on
3. Use JavaScript to start the video
4. Listen for the video end event and when it occurs turn automatic transition back on

I have not done all these steps in one but I have individually - so it should be possible.

Managing the video is fairly easy
Determining the container type (video or not) is also easy you can check for the presence of a <video> element
Checking when the video stop is easy
$(function() {
  // SOME GLOBALS 
  var carouse = $('#carousel');
  varcurrentvid = false;

  // BIND TO THE SLIDE EVENT
  $('#myCarousel').on('slide.bs.carousel', function (e) {
    // IF A VIDEO IS PLAYING PAUSE IT
    if (currentvid) currentvid.pause();

    // CHECK IF SLIDE HAS A VIDEO
    vid =  $(e.relatedTarget).find('video');
    if (vid.length) {

      // GET A JAVASCRIPT REFERENCE TO <video>
      currentvid = vid[0];

      // STOP THE CAROUSEL
      carousel.carousel('pause');

      // RESET VIDEO TO START
      // currentvid.load(); // optional if you want to start from beginning

       // START VIDEO
       currentvid.play()
    }
    else {
      // REMOVE REFERENCE TO CURRENT VIDEO
      currentvid = false;

      // START AUTO CYCLE
      carousel.carousel('cycle');
   }
  })
});

Open in new window

Author

Commented:
Thanks! You should be able to see the page with the video now, using user name: expertexchange and  password: BobTheBuilder45!!

http://dev.magickitchen.com

Author

Commented:
Ok, please have a look when you get a minute. I added data-ride="carousel" back in. I added in your jquery, but I am not sure what other changes I have to make. I'm attaching the page html here.  Thanks, I am not well-versed in jquery and javascript.  

http://dev.magickitchen.com/

user name: expertexchange
password:  BobTheBuilder45!!
index.html
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Uh, you can't just add my jQuery in - I have no idea what your page looks like - the code was meant to give you the process. The idea was that you would adapt for your specific environment.

Author

Commented:
Ok, yeah... I don't know how to do that. I guess we'll have to hire someone. Thanks.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I would love to help but I can't access your site - those credentials don't work.

Author

Commented:
That's odd, I just used them.
http://dev.magickitchen.com/

user name: expertexchange
password:  BobTheBuilder45!!

Where are you located, Julian? Maybe he has blocked a continent or something.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Username further up was pepe

You added the script at the top of the page. But jQuery is added at the bottom - so your script is erroring out.

Always check the console for errors.

Then I have used the id #carousel to refer to your carousel - you are using id #home-slider - so you need to change that.

Lets start there.

Author

Commented:
thanks, Julian.

Author

Commented:
Ok, I made that change.  Jquery is at bottom of page, and now reads  var carousel = $('#home-slider');
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Not the right ID again
 $('#myCarousel').on('slide.bs.carousel', function (e) {

Open in new window

Should be
$('#home-slider').on('slide.bs.carousel', function (e) {

Open in new window

Author

Commented:
Oh, ok, sorry... now I see that the console says: currentvid is not defined.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
There is an error in line 4 of my code above
varcurrentvid = false;

Open in new window

Should be
var currentvid = false;

Open in new window

No way for me to test - it was only meant to be an outline./

Author

Commented:
Thanks, I made that change. It is carrying on to the next slide before the video finishes, but no errors in the console.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Another ID not updated
var carousel = $('#carousel');

Open in new window

Should be
var carousel = $('#home-slider');

Open in new window

Also there is no code to check if the first slide has a video - so change the above then manually go to the last slide and let it transition to the first - then see if that works.
If it does we can fix the on load video check

Author

Commented:
Ok, change made. The last slide does transition, to the video, and then on through the slides.

On initial page load, the video plays to the end, then stops, and if I hit the data-slide, it goes through the rest of the slides.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The problem is that the slide transition event fires even when the carousel is paused.

What needs to happen is that you need to maintain a state variable that determines whether or not you have paused.

When the event fires you check this - if it is set then you e.preventDefault() the event - otherwise you let it through.

You then have to listen for the stop event on the video so you can set that state variable to false - otherwise the transition will not continue.

There is another caveat to this - if the user clicks to the next slide - then we need to cater for that - in other words stop the video and allow the transition.

I am still thinking about this last one.

Author

Commented:
I'm not worthy....

Author

Commented:
You've brought me so far with this, I am going to open a new question for the final steps. Thanks a million!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Apologies Melody, this one fell off the list - so I did not come back to it.

Give me until tomorrow to look at it - I know what the problem with it is - just need to find the time to fix it.

The theory on the code is good - just need to get around the BS issue where it fires the slide event even when the slider is paused - so we need to look at potentially maintaining a variable that keeps the paused state and use that in the code.

I am not sure why it is firing the slide event when paused - not convinced that this is normal behaviour - which is what I wanted to research. I also don't have a test setup for this so I have been working with your page which is not optimal as I can't alter your script.

If I have not posted back within 12 hours please ping me and I will take a look.

Author

Commented:
You are wonderful, thanks very much. Would it help if I sent you some pages to set up a test environment?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial