Question

好的我的指标和我的下一个/上一个按钮都不起作用。有人能帮我吗。谢谢！我是整个编码的新手，并试图建立一个投资组合页面。我已经研究了一堆并尝试了不同的东西，但没有任何工作。

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Designs By Regina</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.6/css/bootstrap.min.css" integrity="sha384-
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" 
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="js/main.js" type="text/js">
</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div class="container">     
<div id="portfolio">
<div class="row">
<div class="col-xs-4 col-md-6 col-lg-8">
<h1 class="display-3">Portfolio</h1>
<p class="lead">Here are some examples of my latest works.</p>

<div id="carouselPortfolio" class="carouselSlide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" 
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">

<!-- Images -->
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://www.placehold.it/1024x700"             
alt="First slide">
<div class="carousel-caption">
<h3>Business Cards</h3>
<p>Here are some business cards I have made.</p></div></div>

<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.placehold.it/1024x700"     
alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>First Website in 1997</h3>
<p>I ran one of the top Mariah Carey fansites for six years (1998-2003) and 
got to meet Mariah Carey multiple times, got 20+ autogaphs, got personal 
phone messages from Mariah to put on my website and I enjoyed updating it on 
a daily basis.</p></div></div>

<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.placehold.it/1024x700" 
alt="Third slide">
<div class="carousel-caption">
<h3>Billboard Designs</h3>
<p>I worked with SSMarketing Solutions and designed various marketing 
materials for her clients. I got the change to design and illustrate two of 
their billboards that appeared on main highways in New Jersey.</p></div>        
</div>

</div><!--Carousel Inner-->
</div><!--Carousel Example Slides Only--> 

<!-- Controls -->
<a class="carousel-control-prev" href="#carouselPortfolio" 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="#carouselPortfolio" role="button" 
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>

</div><!--column-->
</div> <!--row-->
</div><!-- Scrollspy -->

</div><!--container-->

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" 
integrity="sha384-
A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" 
crossorigin="anonymous"></script>    
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" 
integrity="sha384-
DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.6/js/bootstrap.min.js" integrity="sha384-
vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
crossorigin="anonymous"></script>


</body>
</html>

Answer 1

正确的标记是......

<div id="carouselPortfolio" class="carousel slide" data-ride="carousel">

由于......

，您的代码无效

<div id="carouselPortfolio" class="carouselSlide" data-ride="carousel">

http://www.codeply.com/go/oRHnhgMfvA

Carousel Not Working Bootstrap 4

1 个答案: