这是轮播的代码
下一个上一个按钮在他下面的 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>最佳答案
看起来您只是缺少一些 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>关于javascript - 停止 Bootstrap 轮播下一个上一个按钮在外部 div 上单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38897882/