Question

我想要做的是在与该列相关的幻灯片出现时突出显示背景色的列。

我正在使用bootstrap carousel和col-md- columns

我的HTML部分看起来像这样：

<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>

我正在使用的是这个：

.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%));
    }
}

最后我尝试的jQuery就是这个：

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

我知道脚本没有完成，但它甚至不能在第一张幻灯片上工作，这就是我不能继续的原因。

我希望你能帮助我:)。

还没有工作，我目前的html标记与你的相同，它在FIDDLE上效果很好，但javascript似乎对我不起作用。我想我没说正确的方法。我把它放在这样的顶端。

<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>

我省略了其余的脚本和链接标记，因此如果我的方法正确，你可以更好地看到它。

Answer 1

试试这个

$('#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

轮播功能

1 个答案: