Add class Jquery

[elcape16]

Hello I’m trying to do a slider and have jquery add a class on content out side that slider, Is it possible? I’m not good at all with Jquey.

Something like this!

slider here



Slider 1 - Color Orange


Slider 2 - Color Blue








Content Here

add class orange when Slide 1 is current or add class blue when Slide 2 is current

Thanks is advance!!

Alex

[elcape16]

Yes Anything slider, but my question is how to add a class to another element outside the slider itself

[Mottie]

You can use the built in callbacks AnythingSlider provides (demo):

jQuery(function($){

var $box = $('.colorbox'),

// class to add: slide 1 = blue, slide 2 = orange, etc

colors = [ 'blue', 'orange', 'green' ],

changeBox = function(slider){

$box

.removeClass( colors.join(' ') )

.addClass( colors[slider.currentPage-1] || '' )

};



$('#slider').anythingSlider({



// Callback when the plugin finished initializing

onInitialized: function(e, slider) {

changeBox(slider);

},



// Callback when slide completes - no event variable!

onSlideComplete: function(slider) {

changeBox(slider);

}



});

});​

[elcape16]

Thanks a lot for your help but I don’t think I explain myself well….

I think these images will do a better Job

Slider 1

Slider 2

Thanks again for your help…

[elcape16]

Mottie, Thanks….

That’s exactly what I need can I do to more than one element, sorry my Jquery skills are almost none :S

[Mottie]

Just change this line:

$box = $('.colorbox'),

to point to those box title class names; i.e., it doesn’t need to be unique since we’re using classes.

[elcape16]

Thanks I’m working on it!! Thanks A Lot

[semismurf]

Hey mottie. What if i have an id in the nav that i want to add a class “active” to based on which slide i’m on.

id=”nav1″ class=”menu active” <-- active slide id=”nav2″ class=”menu”
id=”nav3″ class=”menu”
id=”nav4″ class=”menu”

id=”nav1″ class=”menu”
id=”nav2″ class=”menu active” <-- active slide after hitting next id=”nav3″ class=”menu”
id=”nav4″ class=”menu”

what would that look like?

[Mottie]

I think this demo will help you; but if you are still having problems, please modify that demo with your HTML

[Author]

Posts