javascript - 引导轮播不工作和初始化
问题描述
请有人可以分析下面的代码并告诉我为什么轮播不工作。即使我单击下一步或 perv glyphicon,图片也不会滑动。我希望它是自动的。它在任何浏览器中都不起作用。我从一个网站上获取了这段代码,它在那里完美地工作,但在我的笔记本电脑上却没有。我无法理解问题出在哪里
.colht{
height:200px;
border: 5px solid red;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Power Me Up
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Power Me Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active "><a href="#">Menu 1</a></li>
<li class="">
<a class="" href="#">Menu 2</a>
</li>
<li class=""><a href="#">Menu 3</a></li>
<li class=""><a href="#">Menu 4</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-generic" data-slide-to="1" ></li>
<li data-target="#carousel-generic" data-slide-to="2" ></li>
<li data-target="#carousel-generic" data-slide-to="3" ></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg" alt="Menu 1" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 1
</h3>
</div>
</div>
<div class="item">
<img src="images/2.jpg" alt="Menu 2" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 2
</h3>
</div>
</div>
<div class="item">
<img src="images/3.jpg" alt="Menu 3" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 3
</h3>
</div>
</div>
<div class="item">
<img src="images/4.jpg" alt="Menu 4" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 4
</h3>
</div>
</div>
</div>
<a class = "left carousel-control" href="#carousel-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class = "right carousel-control" href="#carousel-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
试试下面的代码:
<!-- By abinthaha -->
<html lang="en" class="">
<head>
<link rel="canonical" href="https://codepen.io/abinthaha/pen/RyjLKa">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<style class="cp-pen-styles"></style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class=""></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class="active"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item">
<img src="https://news.marvel.com/wp-content/uploads/2017/12/tt-m.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="https://cdn.movieweb.com/img.news.tops/NEx6Czlz5SCWBy_1_b/Marvel-Movies-Release-Slate-2021-2022-Mcu.jpg" alt="Chicago">
</div>
<div class="carousel-item active">
<img src="https://cdn.images.express.co.uk/img/dynamic/36/590x/Avengers-Iron-Man-was-almost-played-by-another-major-star-936289.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
推荐阅读
- javascript - 动态组件查找导致 Next.js 包大小爆炸,如何解决?
- php - 谷歌日历 API 令牌不刷新
- rest - 尝试将标签添加到 Bitly API 查询字符串
- java - 统计所有在 Hashmap 中添加键值的调用
- nuxt.js - 使用 purgecss 的 `rejected` 选项时,Tailwind 不提供拒绝/清除的样式列表
- python - Selenium 有没有办法阻止 ctrl+c 关闭浏览器窗口
- javascript - Laravel Mix 不加载资源
- excel - 如何自动格式化不包含换行符或缩进的代码?
- python - macOS:如何更改 PATH 环境变量?
- javascript - 文本格式化 CrystalReports 的问题