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>