Avatar of Melody Scott
Melody Scott
Flag for United States of America asked on

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!
Web DevelopmentCSSHTMLJavaScript* jqGrid

Avatar of undefined
Last Comment
Melody Scott

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Melody Scott

ASKER
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 Scott

ASKER
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.
Melody Scott

ASKER
Oh, guess I did close it by selecting your answer as a solution.. but I was wrong about data-interval fixing the issue, unfortunately.
Your help has saved me hundreds of hours of internet surfing.
fblack61
Melody Scott

ASKER
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 Hansen

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 Scott

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

http://dev.magickitchen.com
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Melody Scott

ASKER
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 Hansen

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 Scott

ASKER
Ok, yeah... I don't know how to do that. I guess we'll have to hire someone. Thanks.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Julian Hansen

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

ASKER
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 Hansen

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Melody Scott

ASKER
thanks, Julian.
Melody Scott

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

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Melody Scott

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

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 Scott

ASKER
Thanks, I made that change. It is carrying on to the next slide before the video finishes, but no errors in the console.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

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 Scott

ASKER
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 Hansen

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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Melody Scott

ASKER
I'm not worthy....
Melody Scott

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

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Melody Scott

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