the carousel does not pass to the next slide

Miguel Angel Moreno asked 5 months 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>


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


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 commented 5 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?


Mikołaj Smoleński commented 5 months ago

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


Mikołaj Smoleński commented 5 months ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes