Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Simple jQuery Content Slider…

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #37374
    henrycharge
    Member

    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

    #100111
    Mottie
    Member

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

    });​
    #100114
    henrycharge
    Member

    Wow! Thanks a lot :-)

    #123265
    benjaminbrook
    Participant

    That is awsome! Any way to make it automatic?

    #123272
    Mottie
    Member

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

    });

    #129936
    owlinargyle
    Participant

    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?

    #129952
    Mottie
    Member

    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!

    #129982
    Podders
    Participant

    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 …

    #130032
    owlinargyle
    Participant

    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. =)

    #130326
    owlinargyle
    Participant

    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. =)

    #130340
    owlinargyle
    Participant

    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. =/

    #130420
    owlinargyle
    Participant

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

    #130423
    Mottie
    Member

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

    #150507
    vflor
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.