如何解決bootstrap輪播動不了的問題

這篇文章主要介紹了如何解決bootstrap輪播動不了的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

bootstrap輪播動不了的解決辦法：1、確認bootstrap的使用版本；2、修改引用js和css的順序；3、添加“data-ride=“carousel””語句；4、將輪播圖中id修改一致即可。

本文操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦

bootstrap 輪播動不了怎么辦？

解決bootstrap輪播不了問題：

一、首先在開頭導入時要注意你用的bootstrap是哪個版本的，導出的模版可直接去該版本的官網查找、復制，可避免自己寫錯。

ps:千萬不要直接去復制他人的例子導入。

如關于bootstrap3.3.7版本的導入模板：

　<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
此處引用的插件來自于bootstrap官網！

二、引用js、css順序錯誤，必須css、然后是jquery.js，最后再是bootstrap.js

原因：bootstrap.js需要借助jquery.js

三、默認使用Bootstrap的Carousel組件，只需要加上 data-ride=“carousel” 就可以實現自動播放了。無需使用初始化的js函數。所以，如果carousel不會自動播放，那么首先檢查這個部分。這里還能加其他參數，比如是設置圖片輪轉的時間間隔。

<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">

四、輪播圖中標簽的class內容跟輪播圖div容器的id不一致

例如：ol列表中li標簽，data-target值，必須為"#carousel-example-generic"

因為div容易的id屬性為： id=“carousel-example-generic”

<ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       .....</ol>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決bootstrap輪播動不了的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!