Maison > interface Web > Tutoriel d'amorçage > Que dois-je faire si le carrousel bootstrap ne peut pas bouger ?

Que dois-je faire si le carrousel bootstrap ne peut pas bouger ?

藏色散人
Libérer: 2021-11-02 11:30:49
original
6802 Les gens l'ont consulté

Solution au problème que le carrousel de bootstrap ne peut pas être déplacé : 1. Confirmez la version de bootstrap utilisée ; 2. Modifiez l'ordre de référencement des js et des css 3. Ajoutez l'instruction "data-ride="carousel" ; . Changez l'image du carrousel en Changez simplement l'ID pour être cohérent.

Que dois-je faire si le carrousel bootstrap ne peut pas bouger ?

L'environnement d'exploitation de cet article : système Windows 7, bootsrap version 3.3.7, ordinateur DELL G3

Que dois-je faire si le carrousel ne peut pas bouger ?

Solution au problème que bootstrap ne peut pas carrousel :

1. Tout d'abord, lors de l'importation au début, vous devez faire attention à la version de bootstrap que vous utilisez. Le modèle exporté peut être directement recherché et copié. sur le site officiel de cette version pour éviter de l'écrire vous-même.

ps : Ne copiez jamais directement les exemples d’autres personnes et ne les importez pas.

Par exemple, concernant le modèle importé de la version 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官网!
Copier après la connexion

2. L'ordre de citation de js et css est incorrect. Il doit s'agir de css, puis de jquery.js, et enfin de bootstrap.js

Raison : bootstrap. .js doit utiliser jquery.js

3. Utilisez le composant Carousel de Bootstrap par défaut. Il vous suffit d'ajouter data-ride="carousel" pour réaliser la lecture automatique. Pas besoin d'utiliser la fonction js initialisée. Donc, si le carrousel ne démarre pas automatiquement, vérifiez d'abord cette section. D'autres paramètres peuvent être ajoutés ici, tels que le réglage de l'intervalle de temps pour la rotation de l'image.

<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">
Copier après la connexion

4. Le contenu de classe de l'étiquette dans l'image du carrousel est incohérent avec l'identifiant du conteneur div de l'image du carrousel

Par exemple : la balise li dans la liste ol, la valeur de la cible de données doit être "#carousel- exemple-générique"

car l'attribut easy id de div est : id="carousel-example-generic"

<ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       .....</ol>
Copier après la connexion

Apprentissage recommandé : "Tutoriel d'utilisation de bootstrap"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal