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

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!
Melody ScottAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Usually a carousel has the option to turn auto off - which carousel are you using (your first link requires a login)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor 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!!
Melody ScottAuthor 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.
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Melody ScottAuthor 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.
Melody ScottAuthor 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.
Julian HansenCommented:
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

Melody ScottAuthor 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
Melody ScottAuthor 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
Julian HansenCommented:
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.
Melody ScottAuthor Commented:
Ok, yeah... I don't know how to do that. I guess we'll have to hire someone. Thanks.
Julian HansenCommented:
I would love to help but I can't access your site - those credentials don't work.
Melody ScottAuthor 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.
Julian HansenCommented:
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.
Melody ScottAuthor Commented:
thanks, Julian.
Melody ScottAuthor Commented:
Ok, I made that change.  Jquery is at bottom of page, and now reads  var carousel = $('#home-slider');
Julian HansenCommented:
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

Melody ScottAuthor Commented:
Oh, ok, sorry... now I see that the console says: currentvid is not defined.
Julian HansenCommented:
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./
Melody ScottAuthor Commented:
Thanks, I made that change. It is carrying on to the next slide before the video finishes, but no errors in the console.
Julian HansenCommented:
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
Melody ScottAuthor 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.
Julian HansenCommented:
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.
Melody ScottAuthor Commented:
I'm not worthy....
Melody ScottAuthor Commented:
You've brought me so far with this, I am going to open a new question for the final steps. Thanks a million!
Julian HansenCommented:
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.
Melody ScottAuthor Commented:
You are wonderful, thanks very much. Would it help if I sent you some pages to set up a test environment?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.