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

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

---