Assign separate class to Arrows for...

User 2897851 Photo


Guest
1 post

Hi,

I have posted the same Q in somewhere else, however, could not be able to get any answer. I am hopeful that Expert here in this forum would help me out.

Let say I have below Carousel - that I have downloaded from Net just to demonstrate my issue here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel .item{
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 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 carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/examples/images/slide1.png" alt="First Slide">
</div>
<div class="item">
<img src="/examples/images/slide2.png" alt="Second Slide">
</div>
<div class="item">
<img src="/examples/images/slide3.png" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>


Now I want to change the class of both Left and Right navigation Arrows for each separate Slide, so that when my Slide change then also Color, size, etc would change for both Arrows.

Can somebody point me how to achieve this.

Thanks for any help
User 187934 Photo


Senior Advisor
18,179 posts

You can target the index value of the slide.
<script>

$('#myCarousel').on('slid.bs.carousel', function () {
var slide = $('.item.active').index()+1;
if(slide == 1){
$( '.carousel-control').removeClass('slide2 slide3');
$( '.carousel-control').addClass('slide1');

}else if(slide == 2){
$( '.carousel-control').removeClass('slide1 slide3');
$( '.carousel-control').addClass('slide2');
}
else{
$( '.carousel-control').removeClass('slide1 slide2');
$( '.carousel-control').addClass('slide3');
}
})

</script>

You can see it working here.
http://ericrohloff.com/coffeecup/ccforum/guest1/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.