Simple jQuery Content Slider…

[henrycharge]

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

[Mottie]

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;

});



});​

[henrycharge]

Wow! Thanks a lot :-)

[benjaminbrook]

That is awsome! Any way to make it automatic?

[Mottie]

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

});

[owlinargyle]

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?

[Mottie]

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!

[Podders]

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 …

[owlinargyle]

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

[owlinargyle]

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

[owlinargyle]

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

[owlinargyle]

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

[Mottie]

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

[vflor]

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?

[Author]

Posts