我有一个旋转的旋转木马，底部有自举指示器，用于指示哪张幻灯片可见。但是，白色圆圈不可点击，也不表示哪个幻灯片实际可见。
我做错了什么？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="menu-button-container">
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
</ol>
<figure>
<div class="image-slide active" id="image-1">
<div class="main-image-options-box">
<div class="main-image-options-box-header">Brexit: Whats Next?</div>
<div class="main-image-options-box-caption">Since the UK voted for the UK to leave te European Union, whhat happen next to your investments, & what can you do to pretect your returns?</div>
<a href="#">Find out more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-slide" id="image-2">
<div class="main-image-options-box">
<div class="main-image-options-box-header">Ready-made portfolios</div>
<div class="main-image-options-box-caption">Our ready-made portfolios are designed to capture market directions by adjusting sensative to non-sensative securites to make the most of market swings</div>
<div class="main-image-options-box-caption">This is another caption.</div>
<a href="#">Read more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-slide" id="image-3">
<div class="main-image-options-box">
<div class="main-image-options-box-header">Corporate pensions</div>
<div class="main-image-options-box-caption">Corporate pensions ae suffering. Find out how we can help you start your own private pension. Get set up for the coming years ahead.</div>
<a href="#">Find out more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-slide" id="image-4">
<div class="main-image-options-box">
<div class="main-image-options-box-header">Losing cash on your ISA?</div>
<div class="main-image-options-box-caption">With the recent cut in the Bank of England base rate, now staing at .25%, find out how your ISA ivestments will react.</div>
<a href="#">Find out more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>
</figure>
</div>
<div id="menu-cascading-image-button-container">
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-1"></div>
<div class="menu-cascading-image-button" id="far-left" data- target="#slider" data-slide-to="0">
<div class="inner-text-box" id="default-button">Ready made portfolios<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-2"></div>
<div class="menu-cascading-image-button" id="center-left" data-target="#slider" data-slide-to="1">
<div class="inner-text-box">Apply for an ISA Account<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-3"></div>
<div class="menu-cascading-image-button" id="center-right" data-target="#slider" data-slide-to="3">
<div class="inner-text-box">Current Accounts<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-4"></div>
<div class="menu-cascading-image-button" data-target="'slider" data-slide-to="4">
<div class="inner-text-box">Savings Accountss<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-indicators li {
border: solid;
}
.main-image-options-box
{
padding-left:50px;
}
</style>
</head>
<body>
<div id="menu-button-container">
<div class="row">
<div class="col-md-6">
<div class="bs-example" data-example-id="simple-carousel">
<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
<li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
<li class="active" data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="main-image-options-box-header">Brexit: Whats Next?</div>
<div class="main-image-options-box-caption">Since the UK voted for the UK to leave te European Union, whhat happen next to your investments, & what can you do to pretect your returns?</div>
<a href="#">Find out more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
<div class="item">
<div class="main-image-options-box-header">Ready-made portfolios</div>
<div class="main-image-options-box-caption">Our ready-made portfolios are designed to capture market directions by adjusting sensative to non-sensative securites to make the most of market swings</div>
<div class="main-image-options-box-caption">This is another caption.</div>
<a href="#">Read more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
<div class="item active">
<div class="main-image-options-box-header">Corporate pensions</div>
<div class="main-image-options-box-caption">Corporate pensions ae suffering. Find out how we can help you start your own private pension. Get set up for the coming years ahead.</div>
<a href="#" style="margin-left:100px;">Find out more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
<div class="item">
<div class="main-image-options-box">
<div class="main-image-options-box-header">Losing cash on your ISA?</div>
<div class="main-image-options-box-caption">With the recent cut in the Bank of England base rate, now staing at .25%, find out how your ISA ivestments will react.</div>
<a href="#">Find out more<i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a><a href="#carousel-example-generic" class="right carousel-control" 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>
<div id="menu-cascading-image-button-container">
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-1"></div>
<div class="menu-cascading-image-button" id="far-left" data- target="#slider" data-slide-to="0">
<div class="inner-text-box" id="default-button">Ready made portfolios<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-2"></div>
<div class="menu-cascading-image-button" id="center-left" data-target="#slider" data-slide-to="1">
<div class="inner-text-box">Apply for an ISA Account<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-3"></div>
<div class="menu-cascading-image-button" id="center-right" data-target="#slider" data-slide-to="3">
<div class="inner-text-box">Current Accounts<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-4"></div>
<div class="menu-cascading-image-button" data-target="'slider" data-slide-to="4">
<div class="inner-text-box">Savings Accountss<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</body>
</html>