How to add a class to the first and last visible element of a jQuery image scrollable

Question

I'm using the jQuery tools slider by flowplayer

I have set up a vertical scrollable, total 4 tiles, with 3 tiles being visible at a time. The wrapping element has a border radius and I now want to set the radius on the respective first and last tile in view.

This is what I have:

<div class="iTunesBanner" style="border-radius: .6em">
    <div class="outer_container">
        // other stuff
    </div>

    <div class="scroll_container">
        <div class="scrollable vertical">
            <div class="items">
                <div class="logo_container"></div>
                <div class="logo_container"></div>
                <div class="logo_container"></div>
                <div class="logo_container"></div>
            </div>
        </div>
    </div> 
</div><!-- banner -->

and init:

$(function() {
    if ( $('.items').children().length > 1 ) {
        $(".scrollable").scrollable({ vertical: true, circular: true }).autoscroll(7500);
        $('.logo_container:eq(2)').clone().insertAfter('.logo_container:eq(4)').addClass('clone2nd cloned');
        $('.logo_container:eq(3)').clone().insertAfter('.clone2nd').addClass('clone3rd cloned');
        $('.logo_container:eq(4)').clone().insertAfter('.clone3rd').addClass('clone4th cloned');
    }
});

So I'm basically making 4+3 elements, which then merry-go-round. I'm setting the height of logo_container to 1/3 of the scroll_container so I have 3 tiles visible at a time.

I now want to attach a class to the first and last visible tile to also give borders to these elements.

Is this possible without delving into the plugin?

Thanks for any hints. Totally lost here.

Answer 1

Try this:

$(".logo_container:first-child").addClass("first");
$(".logo_container:last-child").addClass("last");

Make sure you put that after the 3 extra elements have been added.

Answer 2

Something like

$('.logo_container:first, .logo_container:last').addClass('someclass');

maybe?