the carousel does not pass to the next slide

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: the carousel does not pass to the next slide

Miguel Angel Moreno pro asked 7 years ago

I do not know if it's because I'm using the MVC pattern   <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="title" content="Tienda Virtual"> <meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quibusdam quia voluptas saepe consequuntur doloremque obcaecati deleniti mollitia dolore deserunt"> <!-- keyword es para palabras claves--> <meta name="keyword" content="keyword" content='Lorem ipsum dolor sit amet, consectetur adipisicing elit.'> <title>AHMCH</title> <!-- ============================================== PLUGINS CSS ===================================================--> <link rel="stylesheet" href="vistas/css/plugins/bootstrap.min.css"> <link rel="stylesheet" href="vistas/css/plugins/mdb.min.css"> <!-- <link rel="stylesheet" href="vistas/css/plugins/fontawesome.css">--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <link rel="stylesheet" href="vistas/css/plantilla.css"> <link rel="stylesheet" href="vistas/css/login.css"> <!-- ============================================== HOJAS DE ESTILOS PERSONALIZADAS ===================================================--> <link rel="stylesheet" href="vistas/css/plugins/bootstrap.min.css"> </head> <body> <!-- Main navigation --> <header> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"> <div class="container"> <a class="navbar-brand" href="#"> <strong>MDB</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent-7"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Profile</a> </li> </ul> <form class="form-inline"> <div class="md-form mt-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> </div> </form> </div> </div> </nav> <!-- Navbar --> <!--Carousel Wrapper--> <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-2" data-slide-to="1"></li> <li data-target="#carousel-example-2" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="view"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide"> <div class="mask rgba-black-light"></div> </div> <div class="carousel-caption"> <h3 class="h3-responsive">Light mask</h3> <p>First text</p> </div> </div> <div class="carousel-item"> <!--Mask color--> <div class="view"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide"> <div class="mask rgba-black-strong"></div> </div> <div class="carousel-caption"> <h3 class="h3-responsive">Strong mask</h3> <p>Secondary text</p> </div> </div> <div class="carousel-item"> <!--Mask color--> <div class="view"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide"> <div class="mask rgba-black-slight"></div> </div> <div class="carousel-caption"> <h3 class="h3-responsive">Slight mask</h3> <p>Third text</p> </div> </div> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <!-- ============================================== PLUGINS DE JAVASCRIPT ===================================================--> <script src="vistas/js/plugins/jquery.min.js"></script> <scrip src="vistas/js/plugins/popper.js"></scrip> <scrip src="vistas/js/plugins/bootstrap.min.js"></scrip> <scrip src="vistas/js/plugins/mdb.min.js"></scrip> <!-- ============================================== JAVASCRIPT PERSONALIZADO ===================================================--> <scrip src="vistas/js/carousel.js"></scrip> </body> </html>

Miguel Angel Moreno pro answered 7 years ago

I managed to solve it but I get this error, does anyone know about it?   Uncaught TypeError: Cannot read property 'addEventListener' of null at Object.u.init

Mikołaj Smoleński staff answered 7 years ago

First of all You have spelling mistake in that part: ===================================================–> <script src=”vistas/js/plugins/jquery.min.js“></script> <scrip src=”vistas/js/plugins/popper.js“></scrip> <scrip src=”vistas/js/plugins/bootstrap.min.js“></scrip> <scrip src=”vistas/js/plugins/mdb.min.js“></scrip> <!– ============================================== JAVASCRIPT PERSONALIZADO ===================================================–> <scrip src=”vistas/js/carousel.js“></scrip>   It should be 'script'. Regards

Miguel Angel Moreno pro commented 7 years ago

It was a silly mistake I'm sorry but when I wrote it well he came up with the following error: Uncaught TypeError: Cannot read property ‘addEventListener’ of null at Object.u.init Do you know anything about that?

Mikołaj Smoleński staff commented 7 years ago

You are repeating bootstrap.css declaration. This can also cause an error

Mikołaj Smoleński staff commented 7 years ago

If You still have problems I suggest to send me Your zipped project to m.smolenski@mdbootstrap.com for a verification.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
Miguel Angel Moreno
Pro User
10Support score
5Questions 1Answers
0Snippets likes 0Snippets