Haven't figured out how to change active class of carousel...any ideas?

Haven't figured out how to change active class of carousel...any ideas?
0

#1

This is the 2nd rendition of my personal portfolio.
http://codepen.io/shawngrooms/pen/vXvKPL?editors=1010


#2

Active should be a selector, not a class.
You typically don’t even need any JavaScript to style an “Active” item.

For example to style an active link you can use the CSS rule:

a:active {
background-color: yellow;
}
http://www.w3schools.com/cssref/sel_active.asp

If you need further assistance, please explain the exact HTML element you are trying to make active and what this is supposed to do.


#3

Is the active class strictly for coloring? I thought I needed it to signify which slide to start on. Or, if active is absent, does it just start on the first slide?


#4

Looked more closely. Looks like this class is being applied to the dot as you go through the carousel:
.carousel-indicators .active {
background-color: #333;
}

You can examine the dot in Chrome’s web inspector to see that.
All you have defined is a color, so yes it is only adding a background color… However, the Bootstrap JavaScript is doing a lot behind the scenes here. I believe it uses the Data Target component for the JavaScript, but I am not sure it’s difficult to say what the framework is doing exactly.

I am not sure which version of Bootstrap you are using, but it looks like it uses the data slide for ordering.

    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php In addition to the data target.


#5

hmm…I think I just need to walk away from this for a bit. I’m just going to remove the active class for now and see what happens.


#6

I think I figured out a lot of my issues. I’m using codepen and the quickload feature they have loaded bootsrap 3.3.7 for CSS and 3.2.0 for JS.


#7

I am glad to hear you are making progress in figuring out your issues.