Why does my slideshow crash when I use Bootstrap with vanilla JavaScript? It seems like there is a timeout or something...
I'm not sure why this is happening. When I remove Bootstrap, the slideshow works fine. Here is my code:
I attempted to remove Bootstrap and the slider is working without any issues. However, I want to use Bootstrap. Is there a solution? Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="">
</div>
<nav class="navbar navbar-expand-lg ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Reservation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Chefs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Events</a>
</li>
</ul>
</nav>
</header>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/food3.png" class="img">
</div>
<div class="mySlides fade">
<img src="images/pizza.png" class="img" >
</div>
<div class="mySlides fade">
<img src="images/hamburger2.png" class="img" >
</div>
<div class="dotz">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="script.js" charset="utf-8"></script>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS:
* {box-sizing:border-box;
margin:0;}
.img{
width: 100%;
user-select: none;
}
.slideshow-container{
max-width: 93rem;
position: relative;
margin: auto;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active{
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.dotz{
text-align:center;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Javascript
var slideIndex=1;
showSlides(slideIndex);
function currentSlide(n){
showSlides(slideIndex=n);
}
function showSlides(n){
var i;
var slides=document.getElementsByClassName("mySlides");
var dots=document.getElementsByClassName("dot");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display="none";
}
for (var i = 0; i < dots.length; i++) {
dots[i].className=dots[i].className.replace(" active","");
}
slides[slideIndex-1].style.display="block";
dots[slideIndex-1].className+=" active";
}