这是轮播的代码
下一个上一个按钮工作在他的下面div如何阻止它
当我点击下面的div旋转木马工作时，照常移动
当我点击任何标签然后旋转木马滑动通常我想要阻止它时，旋转木马div有另一个带有制表系统。我认为它的重叠div
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="carousel slide" id="myCarousel" style=" border-top: 4px solid #ccc;">
<div class="carousel-inner" style=" margin-top: 20px;">
<div class="item active ">
<ul class="thumbnails">
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
</div>
<nav>
<ul class="control-box pager" >
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
</div>
答案 0 :(得分：1)
看起来你只是缺少一些bootstrap语法。我只是将您的代码与
进行了并排比较http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
以下是否有效？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="false" style=" border-top: 4px solid #ccc;">
<div class="carousel-inner" role="listbox" style=" margin-top: 20px;">
<div class="item active ">
<ul class="thumbnails">
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thosmes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item ">
<ul class="thumbnails">
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thomes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-4 col-md-2 col-xs-12 ">
<div class="fff">
<div class="caption">
<a href="#"><img class="img-responsive" src="<?php echo base_url()?>assets/images/css.jpg" alt=""></a>
<strong>Praesent commodo Nibh Etiam Sem Nullam</strong><br>
<strong style=" color:#029f5b;"> Alxender Thosmes</strong><br>
Nullam Condimentum Nibh Etiam Sem no inquiry so cordial
<a class="" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
</div>
<nav>
<ul class="control-box pager" >
<li><a data-slide="prev" role="button" href="#myCarousel" class="left"><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" role="button" href="#myCarousel" class="right"><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
</div>