請教各位前輩~為什麼carousel不動? (新手>//<)

boostrap carousel css htm vscode

annajhan 2021-09-06 10:59:16 ‧ 1965 瀏覽

爬文後也照改了不同方式，它就是不動...(天公北阿~~~~)
所以想請教各位大大了><(我是套用boostrap4.6的)

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img  class="d-block w-100" src="https://picsum.photos/1200/300?random=7" >
    </div>
    <div class="carousel-item">
      <img class="d-block w-100"  src="https://picsum.photos/1200/300?random=9" >
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://picsum.photos/1200/300?random=8" >
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

listennn08 iT邦高手 5 級 ‧ 2021-09-06 11:10:41 檢舉

https://getbootstrap.com/docs/4.6/components/carousel/#usage
請載入 jquery 跟 bootstrap 的 js
然後初始化 carousel

annajhan iT邦新手 5 級 ‧ 2021-09-07 20:15:07 檢舉

可以了~~~感謝大大^^

annajhan iT邦新手 5 級 ‧ 2021-09-07 20:16:06 檢舉

原本也是有貼上jquery跟boostrap的js 可是當時怎麼也不動...

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Wilion

iT邦新手 3 級 ‧ 2021-09-06 11:24:17

應該沒引入js而已，附上document的template。

bootstrap v4.6

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>bootstrap</title>
  </head>
  <body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img  class="d-block w-100" src="https://picsum.photos/1200/300?random=7" >
    </div>
    <div class="carousel-item">
      <img class="d-block w-100"  src="https://picsum.photos/1200/300?random=9" >
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://picsum.photos/1200/300?random=8" >
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>