This should be working.  I'd make sure that your click events are firing as you expect them to because some elements of the bootstrap carousel can appear above your elements and prevent clicks.

If you add the following controls in **HTML**:



    <div id="carouselButtons">
        <button id="playButton" type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-play"></span>
         </button>
        <button id="pauseButton" type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-pause"></span>
        </button>
    </div>

Then the following **JavaScript** should control starting and stopping on any frame:



    $('#playButton').click(function () {
        $('#homeCarousel').carousel('cycle');
    });
    $('#pauseButton').click(function () {
        $('#homeCarousel').carousel('pause');
    });

As related to my first point, to get them to appear properly within the carousel, you can style the button group with the following **CSS**:



    #carouselButtons {
        margin-left: 100px;
        position: absolute;
        bottom: 0px;
    }

[Working Demo in jsFiddle][fiddle]
===

For this functionality to make the most sense, you probably want the carousel to continue moving, even when hovering over it (otherwise after the play selection is made, the cycling behavior won't start up again until you move the mouse).

According to the [carousel docs][carousel]: 

> **Option** - pause  
> **Default** - "hover" - Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Instead, make sure you turn this off when you initialize the carousel like this:



    $('#homeCarousel').carousel({
        interval:2000,
        pause: "false"
    });

[fiddle]: http://jsfiddle.net/KyleMit/XFcSv/
[carousel]: http://getbootstrap.com/javascript/#carousel

I have read almost all the threads regarding to the bootstrap carousel, but haven't found an answer to my question.
I have added two control buttons (play/pause) to the carousel, but each button fires the function from the default/first slide. I would like to be able to pause the current slide and play from the current slide whenever the click event happens.

Here is my code:



    <script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
    <script>
    	$(function () {
    		$('.carousel').carousel({ interval:6000 });  
    
    		$('#playButton').click(function () {
    		    $('#homeCarousel').carousel('cycle');
    		});
    		$('#pauseButton').click(function () {
    		    $('#homeCarousel').carousel('pause');
    		});
    	});
    
    </script>


And the two controls:



    
    <button id="playButton">Play</button>
    <button id="pauseButton">Pause</button>

Add Play/Pause button to bootstrap carousel

There are just two minor things here.

The first is in the following carousel indicator list items:



    <li data-target="carousel" data-slide-to="0"></li>

You need to pass the `data-target` attribute a **selector** which means the ID must be prefixed with `#`.  So change them to the following:



<pre><code>&lt;li data-target=&quot;<b>#</b>carousel&quot; data-slide-to=&quot;0&quot;&gt;&lt;/li&gt;
</code></pre>

Secondly, you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one `active` class.  Like this:



<pre><code>&lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-target=&quot;#carousel&quot; data-slide-to=&quot;0&quot; <b>class=&quot;active&quot;</b>&gt;&lt;/li&gt;
    &lt;!-- Other Items --&gt;
&lt;/ol&gt;
&lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;item <b>active</b>&quot;&gt;
        &lt;img src=&quot;https://picsum.photos/1500/600?image=1&quot; alt=&quot;Slide 1&quot; /&gt;
    &lt;/div&gt;
    &lt;!-- Other Items --&gt;
&lt;/div&gt;
</code></pre>

[Working Demo in Fiddle][fiddle]
===

[fiddle]: http://jsfiddle.net/KyleMit/XNr3z/

My carousel from Bootstrap won't display my images or react to the controls.

This is my HTML:

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>Skates R Us</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<link rel="stylesheet" href="css/bootstrap.min.css">
    		<link rel="stylesheet" href="css/global.css">
    	</head>
    
    	<body>
    		<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    			<div class="container">
    				<div class="navbar-header">
    					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    					    <span class="sr-only">Toggle navigation</span>
    					    <span class="icon-bar"></span>
    					    <span class="icon-bar"></span>
    					    <span class="icon-bar"></span>
    					</button>
    					<a href="#" class="navbar-brand">
    						Skates R Us
    					</a>
    				</div>
    				<div class="collapse navbar-collapse">
    					<ul class="nav navbar-nav">
    						<li class="active">
    							<a href="index.html">Home</a>
    						</li>
    						<li>
    							<a href="contact.html">Contact / About</a>
    						</li>
    						<li>
    							<a href="shop.html">Shop</a>
    						</li>
    						<li>
    							<a href="new.html">New Products</a>
    						</li>
    						<li>
    							<a href="media.html">Media</a>
    						</li>
    					</ul>
    				</div>
    			</div>
    		</div>
    
    		<div id="carousel" class="carousel slide" data-ride="carousel">
    			<ol class="carousel-indicators">
    				<li data-target="carousel" data-slide-to="0"></li>
    				<li data-target="carousel" data-slide-to="1"></li>
    				<li data-target="carousel" data-slide-to="2"></li>
    			</ol>
    			<div class="carousel-inner">
    				<div class="item">
    					<img src="img/slide_1.png" alt="Slide 1">
    				</div>
    				<div class="item">
    					<img src="img/slide_2.png" alt="Slide 2">
    				</div>
    				<div class="item">
    					<img src="img/slide_3.png" alt="Slide 3">
    				</div>
    			</div>
    			<a href="#carousel" class="left carousel-control" data-slide="prev">
    				<span class="glyphicon glyphicon-chevron-left"></span>
    			</a>
    			<a href="#carousel" class="right carousel-control" data-slide="next">
    				<span class="glyphicon glyphicon-chevron-right"></span>
    			</a>
    		</div>
    		
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    		<script src="js/bootstrap.min.js"></script>
    		<script>
    			$("#carousel").carousel();
    		</script>
    	</body>
    </html>

My CSS:

    #carousel {
    
    	margin-top: 50px;
    
    }
    
    .carousel {
    	height: 500px;
    	margin-bottom: 60px;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
    	z-index: 10;
    }
    
    /* Declare heights because of positioning of img element */
    .carousel .item {
    	width: 100%;
    	height: 500px;
    	background-color: #777;
    }
    .carousel-inner > .item > img {
    	position: absolute;
    	top: 0;
    	left: 0;
    	min-width: 100%;
    	height: 500px;
    }
    
    @media (min-width: 768px) {
    	.carousel-caption p {
        		margin-bottom: 20px;
        		font-size: 21px;
        		line-height: 1.4;
      	}
    }
    
    img {
    	background: red;
    }

There are no errors in the Chrome console and the code is pretty much the exact same as that from the Bootstrap examples.

This is what the site looks like on my end:
![Site][1]


  [1]: http://i.stack.imgur.com/SMfYg.png

Bootstrap 3 Carousel Not Working

You can doing this by just overriding the styles on the `carousel-indicators` list items.

###Here's a typical indicators section:



    <ul class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
      <li data-target="#myCarousel" data-slide-to="1">Two</li>
      <li data-target="#myCarousel" data-slide-to="2">Three</li>
    </ul>

###You'll want to override some of the default Bootstrap styles:

Convert the display from dots to rectangles by adding a `width` and `height` and removing the `border-radius`:

![demo 1](http://i.imgur.com/I1oAmHM.png)

Then get the text back by removing the negative `text-indent` added by Bootstrap:

![demo 2](http://i.imgur.com/g0ipboo.png)

Finally, add your own `background` and `border` and style however else you like.  
The full styling should look like this:



    .carousel-indicators > li,
    .carousel-indicators > li.active{
        width: 100px;
        height: 25px;
        border-radius: 0;
        border: solid 1px grey;
        background: lightgrey;
        text-indent: 0;
    }
    .carousel-indicators > li.active {
        background: white;
    }

#[Working Demo in Fiddle][fiddle]

[![screenshot][screenshot]][fiddle demo]

----

You could even wrap the entire bit of CSS inside of a media query so that when screen size became limited, you defaulted back to the dots instead of awkwardly stacking the list items:



    @media screen and (min-width: 550px) {
        /* Wrap CSS Here */
    }

###[Responsive Demo in Fiddle](http://jsfiddle.net/KyleMit/kQ5WC/3/show/light/)

[fiddle]: http://jsfiddle.net/KyleMit/kQ5WC/
[fiddle demo]: http://jsfiddle.net/KyleMit/kQ5WC/show/light/
[screenshot]: http://i.imgur.com/EZ6uIBE.png

Standard bootstrap carousel can contains dots to change slides (example on [bootstrap page][1]).

However, I recently read [Why Users Aren't Clicking Your Home Page Carousel][2] which proposed using captions instead of dots like below:

![example][3]

Is this option possible in bootstrap? If so, how can I do so?

  [1]: http://getbootstrap.com/javascript/#carousel
  [2]: http://uxmovement.com/navigation/why-users-arent-clicking-your-home-page-carousel
  [3]: http://i.stack.imgur.com/0uWMo.png

Create bootstrap carousel with captions instead of dots

Simple solutions first - why not add a third panel?



    <div id="ismdb" class="carousel slide" data-interval="false" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <h3>First Panel</h3> <br/>
                <a href="#ismdb" data-slide-to="1" class="btn btn-primary">click1</a>
                <a href="#ismdb" data-slide-to="2" class="btn btn-primary">click2</a>
            </div>
            <div class="item">
                <h3>Second Panel - Click 1</h3><br/>
                <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
            </div>
            <div class="item">
                <h3>Second Panel - Click 2</h3><br/>
                <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
            </div>
        </div>
    </div>

### [Demo in Fiddle](http://jsfiddle.net/KyleMit/T4zSb/2/)

---

If you really needed to, you could implement your own `data-slide-to` functionality so you could trap the item that raised the event.  Replace `data-slide-to` with <code>data-<b>custom</b>-slide-to</code>.  

Then use your own implementation to move the carousel by handling click events.  Here's a clone of the essential parts of `data-slide-to` in our own implementation:



    $('.carousel [data-custom-slide-to]').click(function () {     
        var $carousel = $($(this).attr('href'));
        var newIndex = $(this).data('custom-slide-to');
        $carousel.carousel(newIndex);      
    });

Then add whatever code you'd like to update the new slide. For example:



    var buttonText = $(this).html();
    var slide = $carousel.find(".item")[newIndex];
    $("h4", slide).html("From - " + buttonText);

### [Demo in jsFiddle](http://jsfiddle.net/KyleMit/T4zSb/4/)

Please can someone give me a hint over my question below. Thanks.

I'm trying to create dynamic Bootstrap Carousel panels. 
Basically i have two items in carousel and based on the button clicked on the first panel, I want to dynamically load the content in the Second Panel. below is the sample.

http://jsfiddle.net/sure2win/T4zSb/

HTML
 


       <div id="ismdb" class="carousel slide" data-interval="false" data-ride="carousel">
         <div class="carousel-inner">
          <div class="item active">
           <h3>First Panel</h3> <br>
           <a href="#ismdb" data-slide-to="1" class="btn btn-primary">click1</a>
           <a href="#ismdb" data-slide-to="1" class="btn btn-primary">click2</a>
          </div>
          <div class="item">
           <h3>Second Panel </h3><br>
           <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
          </div>
         </div>
        </div>

CSS



    .carousel, .item{
        width:100%;
        height:200px;
        background-color:#f0f0f0;
        border:1px solid #f0f0f0;
        text-align: center;
    }


Based on whether clicked on "Click1" or "Click2" on First Panel, I want to load the Second panel with text "Second Panel - Click1" or "Second Panel - Click2".

One option could be setting a global variable on click of the buttons, not so impressive option though. Any better ideas for passing data between Panels of Carousel?. Thanks.