Hello all I have five items in a carousel.
The first slide has a class of “active” but how can I make it so when the next slide comes on it becomes the active one?
this is what I have so far.
<ol class="carousel-indicators">
<li data-target="#slideShow" data-slide-to="0" class="active">
<a href="#"></a>
</li>
<li data-target="#slideShow" data-slide-to="1">
<a href="#"></a>
</li>
<li data-target="#slideShow" data-slide-to="2">
<a href="#"></a>
</li>
<li data-target="#slideShow" data-slide-to="3">
<a href="#"></a>
</li>
<li data-target="#slideShow" data-slide-to="4">
<a href="#"></a>
</li>
</ol>
and the script
$(function() {
$('#slideShow').carousel({interval: 2000, cycle:true});
$('#slideShow').on('slide', function() {
var to_slide = $('.carousel-item.active').attr('data-slide-no');
$('.myCarousel-target.active').removeClass('active');
$('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
});
$('.myCarousel-target').on('click', function() {
$('#slideShow').carousel(parseInt($(this).attr('data-slide-to')));
$('.myCarousel-target.active').removeClass('active');
$(this).addClass('active');
});
});
thank you
D
also…is “(this)” the same in this case as saying (#slideShow)?
The attr(‘data-slide-no’) in line 4 doesn’t exist. 
@Francky ;
“(this)”
#slideShow
-Is a selector of ID
Solidcodes actually i had asked about this & slideshow…guessing francky knows.
Francky I went and changed
"<li data-target="#slideShow" [COLOR="#FF0000"]data-slide-to[/COLOR]="0" class="active">
<a href="#"></a>
</li>"
to
"<li data-target="#slideShow" [COLOR="#FF0000"]data-slide-no[/COLOR]="0" class="active">
<a href="#"></a>
</li>"
creating the attribute. It didn’t work. did I misunderstand where to create that attribute?
thx
D
Hi Sherpa,
Can you post a link to a page where I can see this not working?
Sure Pullo. Thank you for taking a look here it is:
http://www.danielamorescalchi.com/wackerSan/indexTest.php
I am trying to get the small orange indicator on the right hand side of the carousel to to change to active when the respective slide comes up.
thx
D
If you look at the slider in Chrome’s Dev Tools, the <div class=“carousel-item”> gets applied a class of “active” as the slide changes.
You can then use this to drill down to whichever elements you are trying to style in CSS.
E.g.
div.active > a > image { ... }
[ot]@solidcodes ;
Nice to see you getting involved, buddy![/ot]
sorry Pullo.
Am confused. I thought the jquery script was taking care of that.
Are you saying the script is fine & I need to tweak the css?
Oh ok, maybe we’re getting our wires crossed.
As I mentioned, as the slides change a class of “active” is applied to <div class=“carousel-item”>.
That works as expected. What else are you trying to achieve?
at the right hand side of the carousl there are five orange squares w/the recycle symbol. they are the slide indicators.
if the carousel is on slide three…i’d like the third indicator to change color to indicate it is the active slide.
so far only the first indicator looks like it is always active.
Thx
d
Ah, I get it. Sorry, my mistake.
That shouldn’t be too hard to do.
I’m away from the PC right now, but I’ll knock you up something later on.
Hi there,
This should do it for you:
var $carouselItems = $(".carousel-item"),
$carouselIndicators = $(".carousel-indicators > li");
$('#slideShow').on('slide', function() {
var currentSlide = $(this).find($(".active")),
currentSlideNo = $carouselItems.index(currentSlide) + 1;
if (currentSlideNo > $carouselItems.length){
currentSlideNo = 0;
}
$carouselIndicators.removeClass("active");
var newItem = $(".carousel-indicators > li[data-slide-no='" + currentSlideNo + "']");
newItem.addClass("active");
});
Just drop it in to your page before the closing </body> tag.
Thank you Pullo will go try it out.
If you don’t mind I’d like your advice on another jquery issues I just posted.
Could you please take a look at:
this one
Thank you
Hi again,
I was just testing this and noticed that the code I posted didn’t work when you scrolled the slider to the left.
Therefore I came up with a different, cleaner approach:
<!DOCTYPE html>
<html>
<head>
<base href="http://www.danielamorescalchi.com/wackerSan/" >
<title>wacker sanitary</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="wrap" class="container-fluid">
<div class="row-fluid"> <!-- preHeader -->
<div id="preHeader" class="span12 pull-right">
<p>search stuff</p>
</div> <!-- endPreHeader -->
</div>
<div id="content" class="row-fluid">
<div id="info" class="span12"></div>
<div id="main" class="span12">
<div id="mainCo" class="span9">
<div id="midBod" class="span12">
<div id="mainImgs"class="span9"> <!-- carouselSpan -->
<div id="slideShow" class="carousel slide"> <!-- carouselStart -->
<div id="showHeader" class="span12">
<a class="left carousel-control" href="#slideShow" data-slide="prev"><img class="pull-left" src="imgs/lftArrow.png"></a>
<a class="right carousel-control" href="#slideShow" data-slide="next"><img class="pull-right" src="imgs/rtArrow.png"></a>
</div> <!-- carouselHdrEnd -->
<div class="carousel-inner">
<div class="item carousel-item active" data-slide-no="0">
<img src="imgs/hazWaste.jpg" alt="haz">
</div>
<div class="item carousel-item" data-slide-no="1">
<img src="imgs/wasteBin.jpg" alt="waste">
</div>
<div class="item carousel-item" data-slide-no="2">
<img src="imgs/blueBin.jpg" alt="blue">
</div>
<div class="item carousel-item" data-slide-no="3">
<img src="imgs/greenBin.jpg" alt="green">
</div>
<div class="item carousel-item" data-slide-no="4">
<img src="imgs/hazWaste.jpg" alt="hazWaste">
</div>
</div>
</div> <!-- carouselEnd -->
</div> <!-- carouselSpanEnd -->
<div class="span3"> <!-- indicatorsStart -->
<ol class="carousel-indicators">
<li data-indicator-no="0" class="active"></li>
<li data-indicator-no="1"></li>
<li data-indicator-no="2"></li>
<li data-indicator-no="3"></li>
<li data-indicator-no="4"></li>
</ol>
</div> <!-- indicatorsEnd -->
<div class="span3"> <!-- indicatorsEnd -->
<img id="oregon" src="imgs/oregon.png" alt="oregon">
</div>
</div> <!-- endNested12 -->
</div>
</div> <!-- mainSpan12end -->
</div> <!-- endContent -->
<div class="push"><!--//--></div>
<footer>
<p>saepe eveniet ut et voluptates repudiandae sint</p>
</footer>
</div> <!-- endContent -->
</div> <!-- endContainerFluid -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/themeScript.js"></script>
<script>
var $carouselIndicators = $(".carousel-indicators > li");
$('#slideShow').on('slide', function() {
setTimeout(function(){
var currentSlideNo = $(".active").data("slide-no"),
newItem = $(".carousel-indicators > li[data-indicator-no='" + currentSlideNo + "']");
console.log(currentSlideNo);
$carouselIndicators.removeClass("active");
newItem.addClass("active");
}, 750)
});
</script>
</body>
</html>