javascript - 3 列轮播 slider 黑白居中图像

Question

我使用以下轮播 slider ，除了居中图像之外，我希望左右图像均为黑白。我必须使用以下 css3: -webkit-filter: Grayscale(100%);滤镜:灰度(100%)；

我应该写在哪里？

<div class="container-fluid">    <!--  "container-fluid" -->
   <div class="row"> 
        <div class="col-md-12 center-block">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-4"><a href="#"><img  src="../images/01.jpg" class="img-responsive"></a></div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4"><a href="#"><img src="../images/02.jpg" class="img-responsive"></a></div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4"><a href="#"><img src="../images/03.jpg" class="img-responsive"></a></div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div> <!-- row -->

</div> <!-- container fluid -->

<script>
    $(document).ready(function () {
        $('#myCarousel').carousel({
            interval: 10000
        })
        $('.carousel .item').each(function () {
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
            if (next.next().length > 0) {
                next.next().children(':first-child').clone().appendTo($(this));
            } else {
                $(this).siblings(':first').children(':first-child').clone().appendTo($(this));                  
            }
        });
    });
</script>

<style>
    .carousel {
        overflow: hidden;
    }
    .carousel-inner {
        width: 150%;
        left: -25%;
    }
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(33%, 0, 0);
        transform: translate3d(33%, 0, 0);  
    }
    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-33%, 0, 0);
        transform: translate3d(-33%, 0, 0); 
    }
    .carousel-control.left, .carousel-control.right {
        background: rgba(255, 255, 255, 0.3);
        width: 25%;
    }
</style>

Answer 1

尝试添加:

.item > div:first-child img,
.item > div:last-child img {
    -webkit-filter: grayscale(100%); filter: grayscale(100%);
}

测试结果:

$(document).ready(function () {
    $('#myCarousel').carousel({
        interval: 10000
    })
    $('.carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));                  
        }
    });
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);  
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0); 
}
.carousel-control.left, .carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}
.item > div:first-child img,
.item > div:last-child img {
    -webkit-filter: grayscale(100%); filter: grayscale(100%);
}

<div class="container-fluid">    <!--  "container-fluid" -->
   <div class="row"> 
        <div class="col-md-12 center-block">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-4"><a href="#"><img  src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></a></div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4"><a href="#"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></a></div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4"><a href="#"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></a></div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div> <!-- row -->
</div> <!-- container fluid -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>