Abbbas khan
Reputation: 302
stop bootstrap carousel next prev button work on outer div click
this is the code of carousel
next prev button work on his below div how to stop it
when i click the below div carousel work as usual move
bellow the carousel div have another with tabing system when i click on any tab then carousel slide moving on usually i want to stop it .i think its overlapping 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>Upvotes: 2
Views: 107
Answers (1)
Adam
Reputation: 518
Looks like you were just missing a few pieces of bootstrap syntax. I just did a side-by-side comparison of your code to
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Does the below work?
<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>Upvotes: 1
Related Questions
- Carousel Twitter BootStrap how to hide the previous or next button at the last and first Item
- How to stop scroll top on clicking next or prev btn of Carousel?
- Bootstrap carousel. Hide 'previous' and 'next' buttons on first and last slide - 'slide' event not working
- buttons inside carousel-inner not clickable
- How to make the content of a carousel change only by clicking on the next and prev buttons?
- Stop carousel on menu click
- Bootstrap carousel prev/next buttons not responding
- bootstrap carousel - .active goes on "prev" button and it stops working
- hide next button in bootstrap modal carousel
- Carousel - Twitter BootStrap ; Hiding the Previous or Next button