jquery - 如何使用jquery carousel在非活动元素li上设置不透明度

Question

我试图尝试一些不同的轮播，我希望有可能改变轮播本身中非活动元素的不透明度。

    <section class="wrap">

<div></div>   
</section>    

<section id="carousel">
<ul>
    <li>

            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>

    </li>
   <li>

            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>

    </li>
    <li>



 $(document).ready(function() {
$("#carousel ul").jcarousel({
        scroll:1,
        auto:5,
        wrap:'both',
        easing: 'easeInOutBack',
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

});​

在下面的这个链接中有一个例子，我想从中央 div 开始。col ，让其他元素，左边一个和右边一个几乎看不见，这可能吗？？？

先感谢您！

Answer 1

我找到了插件作者的一个例子，我相信它可以满足你的需求。您可以查看此链接：

https://github.com/jsor/jcarousel/tree/91b1616fab0e3dfbdb8f39e42f39c48cbe6000d6/examples/feature_slider

// 编辑，你可以试试这个，稍微摆弄一下它应该可以工作。

CSS -.jcarousel-item { opacity : 0.1 } .jcarousel-item.active { opacity: 1 !important }

JS-

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
    visible: 3,
    scroll: 1,
    itemVisibleInCallback: {
    onAfterAnimation: function ( c, o, i, s ) {
        i = ( i - 2 ) % $('#mycarousel li').size();
        jQuery('.jcarousel-item').removeClass('active');
        jQuery('.jcarousel-item').eq( i ).addClass('active');
    }
}
});

});

​</p>

​</p>