代码之家 › 专栏 › 技术社区 › petegoast

使用Carousel时的Jquery/Bootstrap“UncaughtTypeError”

carousel twitter-bootstrap html jquery javascript

petegoast · 技术社区 · 7 年前

我一直在尝试将一个简单的图像旋转木马应用到我正在制作的网站中。现在这是一个非常基本的页面,这是我链接CSS和javascripts的顺序

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我理解首先链接jquery的重要性,这就是我所做的。这就是我的旋转木马代码的外观。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
  <div class="carousel-item active">
    <img class="d-block w-100" src="img/badminton.jpg" alt="Badminton">
  </div>
  <div class="carousel-item">
    <img class="d-block w-100" src="img/football1.jpg" alt="Football">
  </div>
  <div class="carousel-item">
    <img class="d-block w-100" src="img/pool.jpg" alt="Pool">
  </div>
</div>

正如你所看到的,我基本上是从他们的网站上复制了一个,只是为了让它工作。我的第一个图像加载,但尝试单击下一个箭头会出现以下错误

Console log error of jquery / bootstrap conflict

我在网上查看了一下,对于哪个版本的引导程序应该与哪个jquery一起使用,似乎没有达成一致意见。任何帮助都将不胜感激,谢谢。

2 回复 | 直到 7 年前

Angelki 7 年前

您需要一个新版本的引导。试试我的代码。

 <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">
      <title>Document</title>
    </head>

    <body>
      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="img/badminton.jpg" alt="Badminton">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="img/football1.jpg" alt="Football">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="img/pool.jpg" alt="Pool">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
          crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
          crossorigin="anonymous"></script>
    </body>

    </html>
    </body>

    </html>

[with no error][1]

Blake Shadle 7 年前

我建议的唯一更改是从幻灯片的类名中删除“carousel”一词 <divs> ,如下所示:

<div class="item active">

就像这样:

<div class="item">

这适用于Bootstrap 3.3.7。我还没有复习4.0。