Question

I have set up a responsive slider and would like to have all images other than the focused one to be transparent (opacity 50%). The focused image would be the image furthest to the left.

I have used the following plug-in for the slider:

http://matthewtoledo.com/creations/responsive-carousel/example/example-1.html

and have it implemented at:

http://www.schafrick.com/portfolio-clients-nike.html

My jQuery knowledge is very poor and I am unsure where to start. Any help would be very much appreciated. Thanks

Please keep in mind that when I say “focused” I am not referring to mousevents but am talking about the image furthest to the left.

Answer 1

The creator of the carousel already has some implementation:

Example 2

The onShift-method is a setup parameter that takes a function. See: Docu

I adapted it for you:

$('#example').responsiveCarousel({
    // your setup tasks
    onShift: function (i) {
        i = Math.round(i);
        var $current = $('.slider-target li[data-slide=' + i + ']');
        $('.slider-target li[data-slide]').removeClass('current');
        $current.addClass('current');
    }
});

You can style the current frame with the .current class.