Grow your CSS skills. Land your dream job.

Simple jQuery Content Slider…

  • # March 28, 2012 at 4:43 am

    I’ve been working on a simple content slider using jQuery to load content sideways into a container.

    I’ve got it so far with a tabbed navigation on the top of the box to load each box of content into the frame when clicked, what I’d like to do is also have a previous and next navigation on the sides.

    This is what I’ve got so far http://jsfiddle.net/hcharge/4q3GZ/5/ I was hoping somebody could give me some pointers as to how I would use jQuery to have the previous and next navigation…

    Many thanks

    Henry

    # March 28, 2012 at 8:50 am

    Hi Henry!

    I modified the code a bit just to clean it up with some standard code practices. Here is the updated demo and the code:

    $(document).ready(function() {

    var height = 300,
    width = 600,

    slides = 3,

    tabs = $('.tab'),
    contentNum = 1;

    $('.main_inner').css({
    width: slides * width
    });

    $('a.tab_link').click(function() {

    tabs.filter('.active').removeClass('active');
    $(this).parent().addClass('active');

    // make sure contentNum is a number and not a string
    contentNum = parseInt( $(this).attr('rel'), 10 );

    $('.main_inner').animate({
    marginLeft: '-' + (width * contentNum - width)
    }, 600);

    return false;

    });

    $('.previous a').click(function(){
    if (contentNum > 1) {
    // find previous tab, trigger a click on the link
    // subtract 2 because eq() uses zero based index
    tabs.eq(contentNum - 2).find('a').trigger('click');
    }
    return false;
    });

    $('.next a').click(function(){
    if (contentNum < slides) {
    // find next tab, trigger a click on the link
    // contentNum doesn't need + 1 because it is +1 relative to eq()
    // which is a zero based index
    tabs.eq(contentNum).find('a').trigger('click');
    }
    return false;
    });

    });​
    # March 28, 2012 at 9:27 am

    Wow! Thanks a lot :-)

    # February 4, 2013 at 5:49 am

    That is awsome! Any way to make it automatic?

    # February 4, 2013 at 9:49 am

    Hey @benjaminbrook!

    I’ve [updated the demo](http://jsfiddle.net/4q3GZ/342/) with this code; I renamed a few things, so I’ll just show all of the code:

    $(function() {

    var height = 300,
    width = 600,

    tabs = 3,

    $tabs = $(‘.tab’),
    contentNum = 1,

    delay = 2000, // time in milliseconds to pause between tabs
    timer;

    $(‘.play’).click(function(){
    var $t = $(this);
    if ($t.hasClass(‘playing’)) {
    // stop
    clearTimeout(timer);
    $t.removeClass(‘playing’).html(‘play’);
    } else {
    // play
    timer = setInterval(function(){
    contentNum++; // change to contentNum–; to go left
    if (contentNum > tabs){ contentNum = 1; } // loop right
    if (contentNum < 1) { contentNum = tabs; } // loop left
    $tabs.eq(contentNum-1).find(‘a’).trigger(‘click’);
    }, delay);
    $t.addClass(‘playing’).html(‘stop’);
    }
    });

    $(‘.main_inner’).css({
    width: tabs * width
    });

    $(‘a.tab_link’).click(function() {

    $tabs.filter(‘.active’).removeClass(‘active’);
    $(this).parent().addClass(‘active’);

    // make sure contentNum is a number and not a string
    contentNum = parseInt( $(this).attr(‘rel’), 10 );

    $(‘.main_inner’).animate({
    marginLeft: ‘-‘ + (width * contentNum – width)
    }, 600);

    return false;

    });

    $(‘.previous a’).click(function(){
    if (contentNum > 1) {
    // find previous tab, trigger a click on the link
    // subtract 2 because eq() uses zero based index
    $tabs.eq(contentNum – 2).find(‘a’).trigger(‘click’);
    }
    return false;
    });

    $(‘.next a’).click(function(){
    if (contentNum < tabs) {
    // find next tab, trigger a click on the link
    // contentNum doesn’t need + 1 because it is +1 relative to eq()
    // which is a zero based index
    $tabs.eq(contentNum).find(‘a’).trigger(‘click’);
    }
    return false;
    });

    });

    # March 27, 2013 at 3:41 pm

    This is cool. I tried to manipulate it so that I could use only the previous and next features, without the tabs, and it wouldn’t work. I’m pretty skilled with CSS, but JavaScript, not so much. Do the tabs have to remain defined in order for the Prev and Next links to work?

    # March 27, 2013 at 5:37 pm

    HI @downcasteyes!

    Actually the next and previous links simulate a click on the tab to make it change, so the answer is yes… you’ll need the tabs for the links to work.

    I’m not sure what type of functionality you might need, but don’t be afraid to ask!

    # March 27, 2013 at 9:04 pm

    Just hide the tabs in the css, they will still retain their functionality, bit of a hacky way but will make that particular pen the way you want it …

    # March 28, 2013 at 10:32 am

    Thanks for the responses. I did some tweaking yesterday afternoon and was essentially able to make it all work. I enhanced CSS for the Prev and Next so they’ll behave more like buttons and moved them farther down. Reduced the tabs to just be 1,2,3 etc. pagination, which works for the purposes I need it to. So I’m good! And my Boss was pleased. =)

    # April 1, 2013 at 11:39 am

    Okay guys… Now I’ve got an issue with my CSS. If I put a link in the content div, it inherits some of the properties that I’ve applied to the links for the Previous/Next buttons. I changed the JS so that the .previous and .next were IDs instead of Classes, thinking this would help, and it did somewhat but the Content Links still inherit the background color. I’ve tried all sorts of ways of defining the Content Div to have their own link attributes, and nothing seems to be working.

    I put together a jsfiddle; click next bttn to see link on tab 2 [My demo code…](http://jsfiddle.net/downcasteyes/Spdr5/1/ “My demo code”)

    If anyone has the time to look over my code and give me some feedback, I’d really appreciate it. Maybe you’ll see what I keep missing. =)

    # April 1, 2013 at 1:31 pm

    I’m not sure if this is JS or just CSS related. If I should move this to the CSS forum, please let me know. I just didn’t want to break it away from this thread, since it originated here. =/

    # April 2, 2013 at 12:26 pm

    I figured it out. Removing the a:visited from the #next and #previous div IDs did the trick. And then added .content a:link and .content a:hover. Seems so simple to me the next day. Ha ha =)

    # April 2, 2013 at 12:26 pm

    LOL, I’m glad you figured it out :)… I was just now getting around to looking at your demo.

    # September 18, 2013 at 2:41 pm

    I love this design. I have two questions:

    1. I am trying to the js to a wordpress page but the script is not executing. When clicking the tabs, they jump to top of the page… no scrolling.

    2. Is there a way to make it responsive?

    Here is the page I want to use it on as well as a couple of other pages.

    Any suggestions?

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".