Use jQuery to Create a Simple Slider
All it takes are a few lines of code to make your own simple, lightweight content slider using jQuery -- no plugins necessary.
First, use divs to separate your content and create each slide. Make sure each of these divs has its own unique ID. Each div should also contain text or an image/icon with its own class that will be used to trigger the jQuery code.
[html]
<div id="slide-1">
<p>First Slide</p>
</div>
<div id="slide-2" class="dormant-class">
<p>Second Slide</p>
</div>
[/html]
Add these lines to your CSS, and make sure that every slide except the first one is given the class "dormant-class", like in the example above, so that they are initially hidden.
[css]
.dormant-class{
display: none;
}
.active-class{
display: block;
}
[/css]
Here's where the jQuery comes in. When the trigger (#arrow) is clicked, we're going to use jQuery to add the class "dormant class" to the first slide, and remove the class "dormant-class" while adding the class"active-class" to the second slide.
[js]
$('#arrow').click(function(){
$('#slide-1').addClass('dormant-class');
$('#slide-2').removeClass('dormant-class').addClass('active-class');
})
[/js]
The first slide will disappear as the second slide is displayed. To switch back to the first slide, the #slide-2 will have its own trigger (#arrow2), which will remove "active-class" and add "dormant-class" to the second slide, and remove "dormant class" from the first slide, making it active and visible once again.
[js]
$('arrow2').click(function(){
$('#slide-2').removeClass('active-class').addClass('dormant-class');
$('#slide-1').removeClass('dormant-class');
})
[/js]
