【问题标题】:stop bootstrap carousel next prev button work on outer div click停止引导轮播下一个上一个按钮在外部 div 上工作单击
【发布时间】:2016-12-18 06:46:46
【问题描述】:

这是轮播的代码

下一个上一个按钮在他下面的 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>

【问题讨论】:

    标签: javascript jquery html css twitter-bootstrap


    【解决方案1】:

    看起来您只是缺少一些引导语法。我只是将您的代码与

    进行了并排比较

    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>

    【讨论】:

    • 对我不起作用我测试它的工作原理,因为当我将代码粘贴到项目中时它是一样的
    • @Abbbaskhan 我的错误一开始我误解了,你是说你的问题是当你按下一个向左或向右的箭头时它会继续滚动?编辑代码来解决这个问题。
    • 实际上我有三个模板容器,第一个容器包含菜单,第二个包含轮播滑块,第三个有制表系统,当我单击制表按钮然后移动开始轮播滑块时
    • 当我单击选项卡区域然后轮播开始滑动时,我想在单击左右按钮然后开始移动时停止此操作。我认为轮播容器与选项卡容器重叠
    • @Abbbaskhan 我在重现你所说的这个问题时遇到了很多麻烦
    猜你喜欢
    • 1970-01-01
    • 2022-12-06
    • 2015-06-23
    • 2012-12-27
    • 1970-01-01
    • 2012-09-14
    • 1970-01-01
    • 2018-09-24
    • 1970-01-01
    相关资源
    最近更新 更多