Carousel function

Question

What I'm trying to do is to highlight a column with a background-color when a slide related to that column appears.

I'm using bootstrap carousel and col-md- columns

That part of my HTML looks like this:

<section class="third-section">
    <div class="container">
        <div class="page-header">
            <h2>About <span>Gray </span>Matter</h2>
        </div>
        <div class="subtitle-wrap">
            <h3>The most important thing to us is <br>building products people love.</h3>
        </div>  

        <div class="row">
            <div class="col-md-6">
                <div id="carousel" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel" data-slide-to="1"></li>
                    <li data-target="#carousel" data-slide-to="2"></li>
                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner">
                    <div id="slide1" class="item active">
                      <img class="img-responsive" src="img/office.jpg" alt="...">
                    </div>
                    <div class="item">
                      <img class="img-responsive" src="img/01.jpg" alt="...">
                    </div>
                       <div class="item">
                      <img class="img-responsive" src="img/02.jpg" alt="...">
                    </div>
                  </div>

                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel" data-slide="prev">
                    <i class="fa fa-chevron-left"></i>
                  </a>
                  <a class="right carousel-control" href="#carousel" data-slide="next">
                    <i class="fa fa-chevron-right"></i>
                  </a>
                </div>
            </div>
            <div class="wrap">
            <div class="col-md-3 column-1">
                <h5>We are creative</h5>
                <p>Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
            </div>
            <div class="col-md-3 column-2">
                <h5>We are awesome</h5>
                <p>Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
            </div>
                            <div class="col-md-3 column-3">
                <h5>We are innovation</h5>
                <p>Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
            </div>
            <div class="col-md-3 column-4">
                <h5>We are the best</h5>
                <p>Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
            </div>
            </div>
        </div>
    </div>  
</section>

The LESS I'm using is this one:

.wrap{
.margin-top;

    .column-1> .active{
    .contrast-c(lighten(@yellow,10%));
    }   

    .column-2> .active{
    .contrast-c(lighten(@red,10%));
    }   

    .column-3> .active{
    .contrast-c(lighten(@green,10%));
    }   

    .column-4 .active{
    .contrast-c(lighten(@blue,10%));
    }
}   

And finally the jQuery I try is this one:

<script>
$(document).ready(function(){
    if ($('#slide1').hasClass('active')) {
        $('.column-1').addClass('active');
    }
});
</script>

I know the script is not finished but it doesn't even work on the first slide that's why I don't continue.

I hope you can help me :)

---

Didn't work yet, my current html markup is the same as yours, it works fantastic on FIDDLE but the javascript doesn't seem to work to me. I think I don't put it the right way. I have it on top like this.

<head>
<script>

$('#carousel').carousel({
interval: 2000
});

$('#carousel').bind('slid', function() {
$('.col-md-3').removeClass('colone coltwo colthree');
currentIndex = $('div.active').index() + 1;
if(currentIndex == 1)
{
    $('.column-1').addClass('colone');
}
else if(currentIndex == 2)
{
    $('.column-2').addClass('coltwo');
}
else if(currentIndex == 3)
{
    $('.column-3').addClass('colthree');
}
});

</script>
</head>

I omitted the rest of the script and link tags so you can see it better if I have it the right way.

Answer 1

Try this

$('#carousel').bind('slid', function() {
    $('.col-md-3').removeClass('colone coltwo colthree');
    currentIndex = $('div.active').index() + 1;
    if(currentIndex == 1)
    {
        $('.column-1').addClass('colone');
    }
    else if(currentIndex == 2)
    {
        $('.column-2').addClass('coltwo');
    }
    else if(currentIndex == 3)
    {
        $('.column-3').addClass('colthree');
    }
});

FIDDLE