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

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!!

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.

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

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.

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');
   }
  })
});

Select allOpen in new window

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

http://dev.magickitchen.com

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

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.

Ok, yeah... I don't know how to do that. I guess we'll have to hire someone. Thanks.

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

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.

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.

thanks, Julian.

Ok, I made that change.  Jquery is at bottom of page, and now reads  var carousel = $('#home-slider');

Not the right ID again

 $('#myCarousel').on('slide.bs.carousel', function (e) {

Select allOpen in new window

Should be

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

Select allOpen in new window

Oh, ok, sorry... now I see that the console says: currentvid is not defined.

There is an error in line 4 of my code above

varcurrentvid = false;

Select allOpen in new window

Should be

var currentvid = false;

Select allOpen in new window

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

Thanks, I made that change. It is carrying on to the next slide before the video finishes, but no errors in the console.

Another ID not updated

var carousel = $('#carousel');

Select allOpen in new window

Should be

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

Select allOpen 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

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.

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.

I'm not worthy....

You've brought me so far with this, I am going to open a new question for the final steps. Thanks a million!

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.

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