无法加载轮播-Bootstrap 4 [英] Can't load Carousel - Bootstrap 4
问题描述
我想从引导中执行Carousel，我遵循了教程，但是Carousel没有加载.我不知道如何解决这个问题.我试图检查"Bootstrap"站点的文档，但我认为我所做的一切都正确，那又是什么问题呢?
I wanted to do Carousel from bootstrap, I followed the tutorial but the Carousel is not loading. I don't know how to solve this problem. I tried to check the documentation of the "Bootstrap" site but I think I did everything correct, so what's the problem?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kwiaciarnia.pl</title>
<meta name="description" content="Kwiaciarnia">
<meta name="keywords" content="kwiaty, wesela, kościoły, ubiór kościoła">
<meta name="author" content="Michał Martofel">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/305.jpg" width="500px" height="300px" alt="flower" />
<div class="carousel-caption">
<h2>Piękny kwiatek</h2>
</div>
</div>
<div class="item">
<img src="img/300.jpg" width="500px" height="300px" alt="flower" />
<div class="carousel-caption">
<h2>Brzydki kwiatek</h2>
</div>
</div>
<div class="item">
<img src="img/271.jpg" width="500px" height="300px" alt="flower" />
<div class="carousel-caption">
<h2>Śliczny kwiatek</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</main>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
我忘了什么吗?还是bootstrap/jquery脚本有问题?
Did I forget about something? Or are there problems with bootstrap/jquery scripts?
推荐答案
您必须将轮播中的所有项目(图片)都指定为类carousel-item，但您只能将其指定为类carousel-control-prev和carousel-control-next，但是您只给了他们carousel-control类.
You have to give all items (pictures) of the carousel the class carousel-item but you only gave them the class item. Same with the Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave them the class carousel-control.
其余的似乎一切正常！在处理Bootstrap时，您始终必须注意类，因为它们必须完全正确才能正常工作. (您可能还可以删除底部的popper.js-脚本，因为它根本没有使用.)
The rest seems to be working just fine! When handling Bootstrap you always have to look out for the classes since they have to be exactly right for it to work at all. (You could also probably remove the popper.js-script at the bottom since it is not used at all.)
所以基本上只需将所有<div class="item">更改为<div class="carousel-item">并将-next和-prev添加到控件类中，就像我在这里所做的那样:
So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control classes as I did here:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kwiaciarnia.pl</title>
<meta name="description" content="Kwiaciarnia">
<meta name="keywords" content="kwiaty, wesela, kościoły, ubiór kościoła">
<meta name="author" content="Michał Martofel">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/305.jpg" width="500px" height="300px" alt="flower" />
<div class="carousel-caption">
<h2>Piękny kwiatek</h2>
</div>
</div>
<div class="carousel-item">
<img src="img/300.jpg" width="500px" height="300px" alt="flower" />
<div class="carousel-caption">
<h2>Brzydki kwiatek</h2>
</div>
</div>
<div class="carousel-item">
<img src="img/271.jpg" width="500px" height="300px" alt="flower" />
<div class="carousel-caption">
<h2>Śliczny kwiatek</h2>
</div>
</div>
</div>
<a class="left carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="right carousel-control-next" href="#my-slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这篇关于无法加载轮播-Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
