javascript - 为什么 bootstrap 不适用于 js vanilla？

问题描述

为什么当我将 bootstrap 与 vanilla JavaScript 一起使用时，我的幻灯片会崩溃，似乎有超时之类的东西..

我不知道为什么当我删除引导程序时会发生这种情况，他正在正常工作，这是我的代码：

我试图删除引导程序并且滑块可以正常工作但我想使用引导程序有什么解决方案这是我的代码

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="main-nav">
        <div class="col-sm">
      <ul class="main-nav__items">
        <li class="main-nav__item">
          <a href="#">services</a>
        </li>
      </div>
      <div class="col-sm">
        <li class="main-nav__item">
          <a href="#">reservation</a>
        </li>
      </div>
      <div class="col-sm">
        <li  class="main-nav__item">
          <a href="#">menu</a>
        </li>
      </div>
      <div class="col-sm">
        <li  class="main-nav__item">
          <a href="#">our chefs</a>
        </li>
      </div>
        <div class="col-sm">
        <li  class="main-nav__item">
          <a href="#">events</a>
        </li>
      </div>
      </ul>
    </nav>
    </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">menu</a>
        </li>
            <li class="nav-item">
            <a class="nav-link">our chefs</a>
        </li>
            <li class="nav-item">
            <a class="nav-link">events</a>
        </li>
    </ul>
</nav>
    </header>
    <!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <!-- <div class="numbertext">1 / 3</div> -->
    <img src="images/food3.png" class="img">
    <!-- <div class="text">Caption Text</div> -->
  </div>

  <div class="mySlides fade">
    <!-- <div class="numbertext">2 / 3</div> -->
    <img src="images/pizza.png" class="img" >
    <!-- <div class="text">Caption Two</div> -->
  </div>

  <div class="mySlides fade">
    <!-- <div class="numbertext">3/3</div> -->
    <img src="images/hamburger2.png" class="img" >
    <!-- <div class="text">Caption Three</div> -->
  </div>


<!-- The dots/circles -->
<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>

<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";
 }

标签： javascriptbootstrap-4

javascript - 为什么 bootstrap 不适用于 js vanilla？

问题描述

解决方案

推荐阅读