Help with video and pictures in carousel slider

Asked

Viewed 269 times

0

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?

<section class="mbr-slider mbr-section mbr-section__container carousel slide mbr-section-nopadding mbr-after-navbar"
         data-ride="carousel" data-keyboard="false" data-wrap="true" data-interval="5000" id="slider-0">
    <div>
        <div>
            <div>
                <ol class="carousel-indicators">
                    <li data-app-prevent-settings="" data-target="#slider-0" data-slide-to="0" class="active"></li>
                    <li data-app-prevent-settings="" data-target="#slider-0" data-slide-to="1"></li>
                    <li data-app-prevent-settings="" data-target="#slider-0" data-slide-to="2"></li>
                    <li data-app-prevent-settings="" data-target="#slider-0" class="" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full active"
                         data-bg-video-slide="false">
                            <source src="assets/images/PMBASIS_2018.mp4" type="video/mp4" autoplay muted loop></source>

                        <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>
</section>
  • No HTML tag, but there is the JS event. You probably used some sort of timer to slide the slide by yourself, so for the video, just associate this event to the event ending the same.

  • @Andersoncarloswoss used the tag (data-interval"5000") in html: code <Section class="mbr-slider mbr-Section mbr-section__container Carousel slide mbr-Section-nopadding mbr-after-navbar" data-ride="Carousel" data-Keyboard="false" data-wrap="true" data-interval="5000"> code

No answers

Browser other questions tagged

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