Question

我有一个滑块，它有6个图像，并且使用caroufredsel jquery一次只显示3个图像。我需要在中间滑块图像上添加边框（使用类）。我怎样才能做到这一点？

我的代码是，

        $('#gallery').carouFredSel({
            width: '100%',
            auto: true,
            items: {
                visible: 3,
                start: -1,

            },
            swipe: {
                onMouse: true,
                onTouch: true
            },
            scroll: {
                items: 1,
                duration: 1000,
                timeoutDuration: 3000

            },

            prev: '#WorkPrev',
            next: '#WorkNext'
        });

html是，

  <div class="galleryWrap">
        <div id="gallery">
            <div class="galleryImage"> <img src="img/slider2img1.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img2.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img3.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img4.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img5.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img6.jpg"/></div>
        </div>
    </div>

帮帮我。谢谢你提前

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/Dnv23/3/

<强> CSS： -

.galleryImage{float:left}

.galleryImage:nth-child(3n+2){  
  border: 4px solid #ccc;
}

<强> JS： -

$('#gallery').carouFredSel({
    auto: true,
    items: 3,
    swipe: {
        onMouse: true,
        onTouch: true
    },
    scroll: {
        items: 3,
        duration: 1000,
        timeoutDuration: 3000

    },

    prev: '#WorkPrev',
    next: '#WorkNext'
});

Answer 2

您可以使用carouFredSel回调函数

来完成

直接添加边框

$('#gallery').carouFredSel({
        // your all other properties come here
        auto: {
            onBefore : function( data ) {
                var vis_elements;
                vis_elements  = $("#gallery").triggerHandler("configuration", "items.visible");
                var mid_element =  Math.floor(vis_elements/2);
                $.each(data.items.visible, function () { $(this).css({'border': ''})});
                data.items.visible.eq(mid_element).css({'border': '1px solid'});
           }
        }
    });

或者您也可以将css类添加到元素

auto: {
                onBefore : function( data ) {
                    var vis_elements;
                    vis_elements  = $("#gallery").triggerHandler("configuration", "items.visible");
                    var mid_element =  Math.floor(vis_elements/2);

                    $.each(data.items.visible, function () { 
                      // remove class from all other elements
                      $(this).removeClass("your class"); // your class comes here
                    });

                    // add your class here
                    data.items.visible.eq(mid_element).addClass("your class");
               }
            }

检查http://jsfiddle.net/raunakkathuria/rgqfz/

将类添加到滑块caroufredsel中的特定图像

2 个答案:

试试这个： - http://jsfiddle.net/adiioo7/Dnv23/3/