CODEWITHSUNDEEP
jquerycssnivo-slider
Damien
Damien

Reputation: 4319

how do i modify the control nav in Nivo Slider with jquery?

I'm trying to customize Nivo slider. I've added these styles to Nivo slider. That way, the control nav becomes squares.

.nivo-control {
    background-color:#eecd0d;
    height:19px;
    width:19px;
    margin-left:5px;
    float:left;
    text-indent:-9999px;
    text-decoration:none;
}

That works fine and makes all the numbers appear like squares. Now what i'm trying to do is make each square (there will always be four) a different color. What i did was create 3 different classes (the first color is defined by nivo-control). here's what that looks like:

.second_li {
    background-color:#ab62bc;
}

.third_li {
    background-color:#c491d0;
}

.fourth_li {
    background-color:#d6b2de;
}

The problem seems to lie with the jQuery code. I am using addClass to dynamically add the styles to the controls, but it doesn't seem to be working.

$(function(){
    $(".nivo-controlNav a:nth-child(2)").addClass('second_li);
    $(".nivo-controlNav a:nth-child(3)").addClass('third_li);
    $(".nivo-controlNav a:nth-child(4)").addClass('fourth_li);
});

Upvotes: 0

Views: 2768

Answers (1)

Cody Guldner
Cody Guldner

Reputation: 2886

Something that stuck out to me right away was the syntax highlighting on the block of jQuery code. Notice how on line 3, the entire line is red until it gets to the next quote. I think that your code is fine, however, you forgot to add closing coats after the .addClass() parameter. Your code should look like this

$(function(){
  $(".nivo-controlNav a:nth-child(2)").addClass('second_li');
  $(".nivo-controlNav a:nth-child(3)").addClass('third_li');
  $(".nivo-controlNav a:nth-child(4)").addClass('fourth_li');
});

Upvotes: 2

Related Questions