Question

I’m trying to create a slider that should be relatively easy, but I’m unsure if I have to build it out manually or if there is an existing script I could use for it.

The slider design can be seen here.

I’m thinking I could use a fade in / fade out effect for the text and photo at the top, and then add / remove an active class for the “tabs” underneath.

Is there a suggestion as to a pre-made script that I could use or do I have no choice but to do it manually?

Thanks!

Answer 1

I’ve written some days ago a quite simple solution, take a look: http://cssdeck.com/labs/tabs

var menu = $('.menu'),
    tabs = menu.find('a'),
    panes = $('.tab_pane');

tabs.on('click', function() {
    var elem = $(this);

    if (!elem.hasClass('active')) {
        panes.stop(true, true).slideUp();
        tabs.removeClass('active');
        $(panes[elem.parent().index()]).slideDown();
        elem.addClass('active');
    }

});