the carousel does not pass to the next slide

MDB SupportCategory: MDB jQuerythe carousel does not pass to the next slide
Miguel Angel Moreno Pro User asked 3 months ago in MDB pro, version:4.5.0

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=”viewportcontent=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no“>

<meta name=”titlecontent=”Tienda Virtual“>

<meta name=”descriptioncontent=”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=”keywordcontent=”keywordcontent=’Lorem ipsum dolor sit amet, consectetur adipisicing elit.‘>

<title>AHMCH</title>

<!– ==============================================

PLUGINS CSS

===================================================–>

<link rel=”stylesheethref=”vistas/css/plugins/bootstrap.min.css“>

<link rel=”stylesheethref=”vistas/css/plugins/mdb.min.css“>

<!– <link rel=”stylesheet” href=”vistas/css/plugins/fontawesome.css”>–>

<link rel=”stylesheethref=”https://use.fontawesome.com/releases/v5.0.10/css/all.cssintegrity=”sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlgcrossorigin=”anonymous“>

<link rel=”stylesheethref=”vistas/css/plantilla.css“>

<link rel=”stylesheethref=”vistas/css/login.css“>

<!– ==============================================

HOJAS DE ESTILOS PERSONALIZADAS

===================================================–>

<link rel=”stylesheethref=”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-brandhref=”#“>

<strong>MDB</strong>

</a>

<button class=”navbar-togglertype=”buttondata-toggle=”collapsedata-target=”#navbarSupportedContent-7aria-controls=”navbarSupportedContent-7aria-expanded=”falsearia-label=”Toggle navigation“>

<span class=”navbar-toggler-icon“></span>

</button>

<div class=”collapse navbar-collapseid=”navbarSupportedContent-7“>

<ul class=”navbar-nav mr-auto“>

<li class=”nav-item active“>

<a class=”nav-linkhref=”#“>Home

<span class=”sr-only“>(current)</span>

</a>

</li>

<li class=”nav-item“>

<a class=”nav-linkhref=”#“>Link</a>

</li>

<li class=”nav-item“>

<a class=”nav-linkhref=”#“>Profile</a>

</li>

</ul>

<form class=”form-inline“>

<div class=”md-form mt-0“>

<input class=”form-control mr-sm-2type=”textplaceholder=”Searcharia-label=”Search“>

</div>

</form>

</div>

</div>

</nav>

<!– Navbar –>

<!–Carousel Wrapper–>

<div id=”carousel-example-2class=”carousel slide carousel-fadedata-ride=”carousel“>

<!–Indicators–>

<ol class=”carousel-indicators“>

<li data-target=”#carousel-example-2data-slide-to=”0class=”active“></li>

<li data-target=”#carousel-example-2data-slide-to=”1“></li>

<li data-target=”#carousel-example-2data-slide-to=”2“></li>

</ol>

<!–/.Indicators–>

<!–Slides–>

<div class=”carousel-innerrole=”listbox“>

<div class=”carousel-item active“>

<div class=”view“>

<img class=”d-block w-100src=”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-100src=”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-100src=”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-prevhref=”#carousel-example-2role=”buttondata-slide=”prev“>

<span class=”carousel-control-prev-iconaria-hidden=”true“></span>

<span class=”sr-only“>Previous</span>

</a>

<a class=”carousel-control-nexthref=”#carousel-example-2role=”buttondata-slide=”next“>

<span class=”carousel-control-next-iconaria-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>

2 Answers
Miguel Angel Moreno Pro User answered 3 months 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 answered 3 months 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

Mikołaj Smoleński replied 3 months ago

If You still have problems I suggest to send me Your zipped project to m.smolenski@mdbootstrap.com for a verification.

Mikołaj Smoleński replied 3 months ago

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

Miguel Angel Moreno Pro User replied 3 months 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?