Slidershow Carrousel Video And Image

Asked

Viewed 533 times

-1

I have a slide with 3 images and a video that is at the beginning, I need to make the video stay until the end, however it is passing to the next images and if you click to go back and display it is passing. Is there any html tag to move a video to the next image only when the video is finished?

                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.3;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br>PM<br></h2>

                                    <p class="mbr-section-lead lead"><strong></strong><br>
                                    </p>

                                    <div class="mbr-section-btn"><a href="pm converse/pmconverse.php" target="_blank" class="btn btn-lg btn-white btn-white-outline">ASSISTA<br>
                                    </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full"
                     data-bg-video-slide="false"
                     style="background-image: url(assets/images/pm_converse.png);">
                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.4;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br>PM CONVERSE</h2>

                                    <p class="mbr-section-lead lead"><strong>Escritório de Projetos como serviço</strong><br>
                                    </p>

                                    <div class="mbr-section-btn"><a
                                            href="pm converse/pmconverse.php"
                                            target="_blank" class="btn btn-lg btn-white btn-white-outline">SAIBA MAIS<br>
                                    </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full"
                     data-bg-video-slide="false"
                     style="background-image: url(assets/images/eXperience.png);">
                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.4;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br>PM<br>eXperience</h2>

                                    <p class="mbr-section-lead lead">Diminuímos o gap entre a academia e a prática, a teoria e a experiência. Conheça a proposta eXperience de formação.</p>

                                    <div class="mbr-section-btn"><a
                                            href="experience/experience.php"
                                            target="_blank" class="btn btn-lg btn-success">CONHEÇA</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full"
                     data-bg-video-slide="false"
                     style="background-image: url(assets/images/parceiros.png);">
                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.5;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br><br><br>PARCEIROS</h2>

                                    <p class="mbr-section-lead lead">Conheça nossos novos parceiros da<br>jornada 2018 junto de nossos clientes.</p>

                                    <div class="mbr-section-btn"><a
                                            href="#parceiros"
                                            target="_blank" class="btn btn-lg btn-info">SAIBA MAIS</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <a data-app-prevent-settings="" class="left carousel-control" role="button" data-slide="prev"
               href="#slider-0">
                <span class="icon-prev" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a data-app-prevent-settings="" class="right carousel-control" role="button" data-slide="next"
               href="#slider-0">
                <span class="icon-next" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

javascript html image video carousel

  • then you have to use javascript

  • 1

    Dear Isabela, please do not duplicate questions, we are not a forum of Helpdesk, wait for your other question to be answered patiently, we are community here, we do not always have time to answer everyone, we answer as much as possible. I recommend you read: Old questions can be posted again

  • @Guilhermenascimento was trying to put a part of the code that was not entered, but it didn’t work... you know some way to insert when it happens?

  • Cara @Isabela just select the code inside the edit and press Ctrl+K. I edited your answer to make the code appear: https://answall.com/posts/321732/revisions

  • @Guilhermenascimento Okay, thank you!

1 answer

0


If there’s a way, just capture the events of video and pause the carousel example:

// capturar evento 'play'
$('video').on('play', function (e) {
    $("#carousel").carousel('pause');
});

//capturar os 3 eventos, stop pause e ended
$('video').on('stop pause ended', function (e) {
    $("#carousel").carousel();
});

Pay attention, would advise you to create a single class for the video(s) and then catch the events by the class.

  • 13dev got it, thanks. I’ll do it and see if it works here.

Browser other questions tagged javascript html image video carousel

You are not signed in. Login or sign up in order to post.