Develop Reference

how to go to specific slide on leftChevron click in bootstrap carousel instead of going to immediate previous slide?

I am using Carousel control.
Now I am also maintaining a java script collection and array like below:
Now this is how the carousel is rendered in UI:
<div class="carousel slide " id="divFormCarousel" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" onclick="SetSaveAndNext()" data-target="#divFormCarousel" data-slide-to="0"></li>
<li onclick="SetSaveAndNext()" data-target="#divFormCarousel" data-slide-to="1"></li>
<li onclick="SetFinish()" data-target="#divFormCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="101">
<form id="frmConsentForm+101" method="post" data-url="/Forms/Save">
</form>
</div>
<div class="item" id="102">
<form id="frmConsentForm+102" method="post" data-url="/Forms/Save">
</form>
</div>
<div class="item" id="404">
<form id="frmConsentForm+404" method="post" data-url="/Forms/Save"></form>
</div>
</div>
<a class="left carousel-control hidden-xs hidden-sm hidden-md hidden-lg" id="leftChevron" style="margin-left: -90px; filter: none;" href="#divPatientFormCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="right carousel-control hidden-xs hidden-sm hidden-md hidden-lg" id="rightChevron" style="margin-right: -90px; filter: none;" href="#divPatientFormCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
Now as we know:
$('#leftChevron').trigger('click'); //This actually helps us to slide to the previous slide, which s working fine!
But what I want to implement here is based on the array and the collection defined below, lets say I am at slide with id 404 , when I click on the previous button(which internally calls the leftChevron click), I want to redirect to that slide (which meets some criteria, defined below)not the exact previous slide.The criteria is:
when I click btnPrevious,based on the collection and the array redirect to that form for which forms[id]=0 and not 1.
forms = {};//Collection which stores the formid and their corresponding status.So it is like forms[101]="0",forms[102]="1",forms[404]="0"
formsarray = [];//this stores the formid, like formsarray[0]=101. formsarray[1]=102, formsarray[2]=404
Basically, using JQuery,I think it should be a simple fix, so any help will be highly appretiated.
Thanks in advance.

The Bootstrap Carousel has an API for this. If you know which page you need to scroll to, you just simple need to call:
$div.carousel(pageNumber);
(Replace $div with your jQuery selector.)
By the way, instead of clicking on the #leftChevron or #rightChevron, you can also use the correct API methods:
$div.carousel('prev');
and
$div.carousel('next');

Dynamic background color in Bootstrap Carousel with AngularJS

I have a strange behaviorin Bootstrap Carousel which I am using with AngularJS. Below is the HTML code where I am trying to dynamically add background color to each thumbnail. What I observe is the following:
Initially, the "active" part of carousel adds background color dynamically to each thumbnail as expected.
However, once I start rotating the carousel, all thumbnails lose their background color.
Now, when I reload the page, all thumbnails get background color again.
So I cannot understand what causing the loss of background color initially during rotation? Thanks.
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div ng-repeat="imgSet in imgSets" ng-class="{item: true, active : $first}">
<div ng-class="row">
<div ng-repeat="img in imgSet track by img.id" class="col-sm-3">
<a href="/appDetail/{{img.id}}" class="thumbnail" style="background-color: {{img.tile_color}};">
<img ng-src="{{uri}}/{{img.image}}" alt="Image" class="img-responsive" height="{{img.tile_height}}" width="{{img.tile_width}}">
</a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->

Well I found how to fix it, but I still do not understand why the original is not working (and why the fix is working):
my {{img.tile_color}} is a string of the form "#1956B7" (or any other #). I thought one must have "#" sign in front of the number. When I removed the "#" it started working.

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.

How to combine tabs and carousel in Twitter Bootstrap

I'm trying to implement Twitter Bootstrap Carousel and Tabs. They both look to be functioning alright on the initial load, but as soon I hit one of the carousel arrows, the content goes away (the active class is removed and display is set to none). Can anybody see what the problem could be? sample page (look at the news box at the bottom right of the screen)

Control links refers to #news-box:
<!-- Carousel nav -->
<a class="carousel-control left" href="#news-box" data-slide="prev">‹</a>
<a class="carousel-control pause-play pause" href="#news-box"></a>
<a class="carousel-control right" href="#news-box" data-slide="next">›</a>
But your carousel has no id:
<div class="carousel slide">
Try with:
<div class="carousel slide" id="news-box">

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">.