Develop Reference

Bootstrap carousel: carousel-indicators not changing size/class

I wanted the carousel-indicators below the images. This required some styling changes to still use Bootstrap for this carousel (see full code below). I added the border-color to the indicators and I added a bit of styling to the carousel-indicators class: position:static; padding-top:10px; width: 100%; margin-left:0;.
The problem is the size of the indicators. If a visitor clicks one of the indicators, the carousel correctly goes to that image. However, the indicators don't change: that is, the indicator that started as active is still larger than the other two indicators (you would now expect the clicked indicator to be the larger one). The first indicator continues to keep the active class. What could be causing this problem?
<div id="carouselvideo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
<div class="item">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
<div class="item">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
</div>
</div>
<script> //The problem persists also if I remove this script line.
$("#carouselvideo").carousel({interval: false});
</script>
<ol class="carousel-indicators" style="position:static; padding-top:10px; width: 100%; margin-left:0;">
<li data-target="#carouselvideo" data-slide-to="0" style="border-color: #333;" class="active"></li>
<li data-target="#carouselvideo" data-slide-to="1" style="border-color: #333;"></li>
<li data-target="#carouselvideo" data-slide-to="2" style="border-color: #333;"></li>
</ol>
Update: If I move the last five lines inside the carouselvideo div, then the problem is gone. However, I dont wan't it there because I want the indicators below the carousel (see How to create this bootstrap carousel of iframes?). Why would this problem exist when the indicators code is placed outside the carousel?

Here is a working example of a bootstrap carousel and the indicators work just fine. You are missing some quotes at the end of your iframe src and this may be causing some issues but you can find a working example at this fiddle http://jsfiddle.net/wamosjk/auotu240/ and here is the code
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
<div class="item">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
<div class="item">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
you can take out the script and just put data-interval="false" in your carousel as well but it is up to you if you are still having issues then there is some more than likely some previously stated css or javascript issues. You may take out the controls if you dont want them and just keep the indicators.
I found that if you want the indicators outside of the carousel the active class no longer toggles so you would need to add the following script
<script>
$(".carousel-indicators li").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
</script>

Bootstrap 3 Carousel Caption Delay

Website: http://freedomcreativesolutions.com/old/steamsource/
Problem: Trying to implement the javascript slide.bs.carousel into the code so that the caption delays and comes in a few seconds after the picture loads in the slideshow. I placed the code for 'slide.bs.carousel' in a script tag before the closing body tag rather than in a separate js file. But it seems like its not working at all and still comes in along with the picture.
What I did: http://jsfiddle.net/fuhs3smx/
Seems like its not working in Jsfiddle (new to this program) which is why I gave the link to the website so you'd guys atleast get an idea of what I'm trying to accomplish.
Guess what I'm trying to ask here is, where exactly should I place the script for 'slide.bs.carousel'? Everything looks good to me and my guess is that I'm placing the script in the wrong area.
<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/family-new.jpg" alt="We are Serious about Clean!">
<div class="carousel-caption">
<h3>Safe for the whole family!</h3>
</div>
</div>
<div class="item">
<img src="./img/RugCleaningFacility.jpg" alt="Rug Cleaning">
<div class="carousel-caption">
<h3>State of the art rug cleaning facility!</h3>
</div>
</div>
<div class="item">
<img src="./img/ProfessionalWW.jpg" alt="Window Washing and Pressure Washing">
<div class="carousel-caption">
<h3>Professional Window Washing and Pressure Washing!</h3>
</div>
</div>
<div class="item">
<img src="./img/UpholsteryClean.jpg" alt="Upholstery Cleaning">
<div class="carousel-caption">
<h3>The deepest upholstery cleaning available!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
UPDATE: After including bootstrap.min.js, I'm getting this message when pulling up the dev tools:
Uncaught TypeError: undefined is not a function
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
What does that mean? Maybe I've mispelled something or maybe the placement is all wrong.

Your fiddle doesn't include Bootstrap.js. You must also include jQuery as Bootstrap.js requires jQuery.
The Uncaught TypeError: jQuery.easing[this.easing] is not a function issue can be resolved by adding jQuery UI.
You'll noticed that I also placed your JS inside .ready() so that it's guaranteed to be executed after the DOM is ready.
I've updated the fiddle for you to review. http://jsfiddle.net/yongchuc/fuhs3smx/2/

Cannot read property 'slice' of undefined when applying carousel from bootstrap on WordPress

I am trying to use carousel.js from Bootstrap on Wordpress. I use a simple wordpress theme--Twenty Fourteen and then add the above code into a new page. No other js file is included. It doesn't work for me on Both Safari and chrome.
It is frustrating to see the this:
http://g.recordit.co/cOEbBrW0FQ.gif
The slides works well when turning left. However, when it comes to right end, it would trigger an error message and then doesn't work again!
Besides, the code above does work when I just put it into a individual html file(without influence of wordpress).
http://tinypic.com/r/28c0eig/8
Sorry for image missing here(since my reputation is less than 10)
Here is the test code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>This is my first image!</p>
</div>
</div>
<div class="item">
<img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>This is my second image!</p>
</div>
</div>
<div class="item">
<img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>This is my third image!</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Can anyone explain why does it happen? Thanks in advance!!

I just got exactly the same thing with Bootstrap 3.2.0 and Wordpress 3.9.2, and found a way round it in my case.
I was using a Wordpress shortcode to output the carousel content. Unfortunately the wpautop filter added some unwanted markup to the output and this broke the carousel.
The short term fix was to remove the wpautop filter. I added this line to functions.php
remove_filter( 'the_content', 'wpautop' );
Hope this helps someone.

Actually on further development, the issue had to do with not setting
the FIRST ITEM "active". You can leave the .slide there but you must
have one active to start. – geilt
This solution is working with slide effect.

I had to remove the class .slide from the main div where you define .carousel to fix that issue. Also I suggest initializing in your own custom JS as well since Wordpress doesn't use the $ variable for jQuery by default may cause issues.

This is a little late but look at the source that is being rendered in the browser. Wordpress has a habit of wrapping elements in p tags. In my case I found that Wordpress was adding an empty paragraph in in my carousel-inner and this was causing the issue.
To fix I removed all the whitespace between my closing divs for the carousel in Wordpress.

In my case, I was using bootstrap from a understrap theme which already has a definition for bootstrap js but, stupid as it sounds, I already had my own bootsrap.js hooked in wp_enqueue_scripts, that silly step took 4 hours of my precious life.

Please refer below answer as its worked for me. I had just removed data-ride="carousel"
Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

Bootstrap Carousel Next/Prev not working

I am working with Twitter Bootstrap Carousel and though I am not very familiar with .js, somehow I got things working fine.
The only problem is that the next/prev button is working in a strange way.
Here's my temp site:
http://tokyo-flaneur.com/dl/donner/contents/menu.html
Although I have 10 images, I can not get to the No.10 by clicking the next button. After the third image, when I click on the next button, the image goes back to No.2.
Also, whichever image I am looking, when I click the prev button, it goes all the way back to No.1.
Could anyone help me or direct me to the right direction? Any help would be appreciated.

You handle slider's next/prev buttons with your own handler, so it slide to 2nd element 1st, than tries to make next()
replace:
$("#myCarousel a").click(function(e){
var index = $(this).index();
//when hitting NEXT button index always 2, for PREV - 0
slider.carousel(index);
e.preventDefault();
});
with
$("#myCarousel .slider-pager a").click(function(e){
var index = $(this).index();
slider.carousel(index);
e.preventDefault();
});
in your onpage script

For future visitors to this question:
Use attribute data-interval="false" (Bootstrap 3.3.5):
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
Here are other supported carousel options in Bootstrap 3:
http://getbootstrap.com/javascript/#carousel-usage
Earlier versions:
jsFiddle Example
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
<br>
<span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
</div>
<div class="item">
<h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
<br>
<span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
</div>
</div>
<a href="" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- #myCarousel -->
<script>
$(function(){
$('.carousel-control').click(function(e){
e.preventDefault();
$('#myCarousel').carousel( $(this).data() );
});
});//END document.ready
</script>
Note: this answer requires jQuery, so ensure that library is loaded. Of course, bootstrap requires jQuery so you should already have it referenced.

Sliding images in Bootstrap's Carousel next to eachother

Please take a look at the carousel in this link.
Is there a way I can alter the code of Twitter Bootstrap's carousel to make the images slide properly instead of messing up like they do now?

Try to add to the outer div containing the carousel with classname 'carousel', the extra classname: 'slide'.
You will get an sliding carousel with this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

I looked at your code and all of your images are wrapped within a <div class="item">...</div> which is correct. However, one of these must be set to active so you'd need to make one of them <div class="item active">.