Show Text After Bootstrap Slide Action Using JQuery Event

1
votes

I'm trying to make a link show up below the carousel after the slide action finishes for each image (I have three slides) in Bootstrap. I am trying to use the slid.bs.carousel method and it's not working. Here is the JQuery I am using, please let me know if you have any suggestions - the div containing the carousel is #sticksCarousel (instead of the default '#myCarousel')

$('#sticksCarousel').on('slid.bs.carousel', function() {
alert("BALLS");
});

Thanks!

EDIT: This is the HTML that I have for the carousel...

<div class="row imgSlider">    
<div class="col-md-10 col-md-offset-1 imgSlider">
<div id="sticksCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
<li data-target="#sticksCarousel" data-slide-to="1"></li>
<li data-target="#sticksCarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active"><img src="img/slide1.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide2.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
</section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span     class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right      carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>    </a>
</div><!--sticksCarousel-->
<p id="sticksCarouselMessage">HEY!</p>
</div>
</div>   
<script type="text/javascript">
$('.carousel').carousel({
interval: 4000 })
$('#sticksCarousel').on('slid.bs.carousel', function() { alert("BALLS"); });
</script>

Basically what I am trying to do is get the paragraph under id 'sticksCarouselMessage' to change each time the carousel slide action is complete, right now its just set as 'HEY'. Im using the javascript alert function just as a test to see if the bootstrap method slid.bs.carousel is working on my site, which it isn't right now.

UPDATE:

Here the changes I have made with all the HTML content... it still doesn't work tho

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title> 
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/lightbox.css" rel="stylesheet" />
<style>
body {
background:url(img/body_bg.png) repeat;
}
.sticksNav {
height:70px;
}
.headerImg{
margin-bottom:20px;
}

</style>
<script type="text/javascript">
$(document ).ready.(function() {    
$('.carousel').carousel({
interval: 4000 });
$('#sticksCarousel').on('slid.bs.carousel', function() { 
$("#sticksCarouselMessage").text("It worked!");
});
});
</script>  
</head>
<div class="container">
<div class="row header">
    <div class="col-md-10 col-md-offset-1">
        <div class="headerImg">
            <img src="img/header_img.png" style="width:100%; height:auto;">
        </div>
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
           </ul>
     </div><!--/.nav-collapse -->
  </div>


</div><!--End Header-->
<div class="row imgSlider">    
<div class="col-md-10 col-md-offset-1 imgSlider">
<div id="sticksCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
<li data-target="#sticksCarousel" data-slide-to="1"></li>
<li data-target="#sticksCarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active"><img src="img/slide1.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide2.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
</section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span   class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right   carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>   </a>
</div><!--sticksCarousel-->
<p id="sticksCarouselMessage">HEY!</p>
</div>
</div>   




</div><!--End Container-->
<body>
</body>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document ).ready.(function() {    
$('.carousel').carousel({
interval: 4000 });
$('#sticksCarousel').on('slid.bs.carousel', function() { 
$("#sticksCarouselMessage").text("It worked!");
});
});
</script> 
</html>

I just want to change the content in the p with the id 'sticksCarouselMessage to display "It worked!" after the slide action was performed.

2
jquerytwitter-bootstrapcarouseltwitter-bootstrap-3

2 Answers

1
votes

On the twitter bootstrap example page: http://getbootstrap.com/javascript/#carousel, this event works.

$('.bs-example').on('slid.bs.carousel', function() {
    alert("BALLS");
});

What version of Bootstrap are you using? Earlier versions had a different name for the slid event. If you are using Bootstrap 3 then there is some other issue, so if you can post more information about how you are calling the carousel that could help.

Edit: Jacob, you need to initialise the carousel in a document.ready: Then you can register events. eg.:

Bootstrap 3:

<script>
  $( document ).ready(function() {
    $('.carousel').carousel({ interval: 4000 });
    $('#sticksCarousel').on('slid.bs.carousel', function() { alert("BALLS"); });
 });
</script>

Bootstrap 2:

<script>
  $( document ).ready(function() {
    $('.carousel').carousel({ interval: 4000 });
    $('#sticksCarousel').on('slid', function() { alert("BALLS"); });
 });
</script>
0
votes

Am using $('#featureRotator').bind('slide.bs.carousel', function (e) { console.log('slide event!'); });

And works fine. It prints 'Slide event!'. From what I see, you are missing the event 'e' with in the function(e). Try having event and see if it works.

Pay attention to 'slide' and 'slid'. 'slide' happens before the animation and 'slid' after...hence you can add your code to either of the following events...

$('#featureRotator').bind('slide.bs.carousel', function (e) {
        console.log('slide event starts!');
    });

    $('#featureRotator').bind('slid.bs.carousel', function (e) {
        console.log('slide event finished!');
    });