Please help! Video Carousel not working as expected...


Topic: Please help! Video Carousel not working as expected...

Guillermo Perez asked 2 months ago

Expected behavior

Sorry to bother, just have a quick question. I'm new and basically what I'm looking for is to have a full page video background with the bar on top... I tried the v5 (bootstrap 5) but it was impossible to center the video when resizing so I tried to switch and installed the jquery version from this location. https://mdbootstrap.com/docs/b4/jquery/getting-started/cdn/ after that, I did proceed to copy the sample offered for video carousels from https://mdbootstrap.com/previews/docs/latest/html/carousel/video/index.html

Now, all is working properly, I was able to configure my videos and my navbar. THE PROBLEM is that the carousel does not move between slides automatically, I tried to configure using the options using data-dmb-x or data- (which I'm not sure which one applies) but none of them seems to works. So I was thinking, I should manually invoke the NEXT movement using javascript, at first I had an error, so I added another JS "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js" but when I try, I get a bad error saying "Cannot read property 'classList' of null"

I'm frustrated, why something that should work easily is so badly documented?

Actual behavior

The slides do not change automatically. I can't access the carousel object via javascript to invoke the next() method.

Resources (screenshots, code snippets etc.)

I'm trying to add my code here, when the button above "Create Snippet" is clicked it shows an Internal server error... so I will try to post my code here, even if it looks ugly and very distorted.

<style type="text/css">
/* Navigation*/
.navbar {
    /*background-color: transparent;*/
    background-color: rgb(214, 140, 2, 0.7)
}

.scrolling-navbar {
    transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.top-nav-collapse {
    background-color: #d68c02;
}

/*footer.page-footer {
    background-color: #d68c02;
}*/

@@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #d68c02;
    }
}



.view {
    height: 100%;
}

/* Carousel*/
.carousel,
.carousel-item,
.carousel-item.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.carousel .carousel-item video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!-- Navbar brand -->
<a class="navbar-brand" href="#">
    <div style="font-family: LittlePaws; font-size: 5vh; margin-top: -15px !important; text-shadow: 2pt 3pt 0pt #f7b211; " class="text-white text-center">Happy Dogs</div>
    <div style="font-family: ReallyBetter; font-size: 3vh; margin-top: -8px !important; font-weight:lighter !important; text-shadow:2pt 1pt 0pt black; letter-spacing:5px;" class="text-center">Pet Grooming</div>
</a>

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">

    <!-- Links -->
    <ul class="navbar-nav ml-auto font-weight-bold">
        <li class="nav-item">
            <a class="nav-link rounded" href="#"><i class="far fa-calendar-check" style="color: #ffc745;"></i> Appointments</a>
        </li>
        <li class="nav-item">
            <a class="nav-link rounded" href="#"><i class="fas fa-map-marked-alt" style="color: #ffc745;"></i> Location</a>
        </li>
        <li class="nav-item">
            <a class="nav-link rounded" href="#"><i class="fas fa-globe-americas" style="color: #ffc745;"></i> Español</a>
        </li>
        <li class="nav-item">
            <a class="nav-link rounded" href="tel:+18328884703"><i class="fas fa-phone-volume" style="color: #ffc745;"></i> Call Us</a>
        </li>
        <!-- Dropdown -->
        <!--<li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>-->
    </ul>
</div>
<!-- Collapsible content -->

  • something! wherever here!
  • some text here!

  • Lots of tutorials at your disposal
  • And all of them are FREE!

  • Start learning
  • Visit our support forum
  • Our community can help you with any question

  • Support forum
  • Previous Next

    Mikołaj Smoleński staff answered 2 months ago

    Please add data-interval="5000" to set autoplay. Time is given in milliseconds.

    Keep coding,  Mikołaj from MDB


    Guillermo Perez commented 2 months ago

    Hi, thank you! I tried to add these options but the carousel simply doesn't move. What I did in the end is forget about the jquery v4 and get the bootstrap v5 sample with only one video, then I created my solution using the onend event of the video tag, so I could dynamically add another video and play and this is how I resolved...

    I would like to know if a better sample could be done, for example, something showing how to center the video on resize, or something to transition between videos, or a preload, etc... because the devil is on the details...

    I'm willing to pay for the Pro version, but we need something that works out of the box, that save us time... I spent almost 2 days trying to figure this out... :-(


    Mikołaj Smoleński staff commented 2 months ago

    Hi Guillermo,

    I made an example snippet with full-page video carousel in MDB5. Here's the code: https://mdbootstrap.com/snippets/standard/mikolaj-smolenski/3215911#html-tab-view

    Keep coding,  Mikołaj from MDB


    Guillermo Perez commented 2 months ago

    Thank you so much, I still don't understand why mine did not work, even that I copied the sample provided, but this other sample will help other people like me... is it possible to post this sample in the documentation?

    Also, I would like to point that I used the following CSS "transform: translateX(calc((100% - 100vw) / 2));" to center the video, because when resizing, the left side of the video is shown, losing the focus.


    Mikołaj Smoleński staff commented 2 months ago

    This snippet is marked as public, so it's available for all users. We use snippets as docs additional examples.

    Keep coding,  Mikołaj from MDB


    Please insert min. 20 characters.
    Status

    Answered

    Specification of the issue
    • User: Free
    • Premium support: No
    • Technology: MDB jQuery
    • MDB Version: MDB4 4.19.1
    • Device: PC
    • Browser: Chrome
    • OS: Windows 10
    • Provided sample code: No
    • Provided link: Yes