Topic: the carousel does not pass to the next slide
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>
.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
Add comment
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 errorMikoł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.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags