Add class to specific image in a slider caroufredsel

Question

I've a slider which having 6 images and that shows only 3 images at a time using caroufredsel jquery. I need to add border to the middle slider image (using class). How can I do this?

My code is,

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

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

Help me. Thanks for advance

Answer 1

You can do it using the carouFredSel callback functions

adding border directly

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

or you can also add css class to the element

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");
               }
            }

Check the http://jsfiddle.net/raunakkathuria/rgqfz/

Answer 2

Try this out:- 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'
});