Quick Tips: Use jQuery to Create a Simple Slider

Quick Tips: Use jQuery to Create a Simple Slider

 

Introduction: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:

• Google
• Microsoft
• IBM
• Netflix

Quick Tips: Use jQuery to Create a Simple Slider:

So Here i provide 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>

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

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.

JavaScript:

$('#arrow').click(function(){
   $('#slide-1').addClass('dormant-class');
   $('#slide-2').removeClass('dormant-class').addClass('active-class');
})

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.

JavaScript:

$('arrow2').click(function(){
   $('#slide-2').removeClass('active-class').addClass('dormant-class');
   $('#slide-1').removeClass('dormant-class');
})

Thats It Comment Here If Any Question Or Suggestion.