Adding visual effects and animations

The biggest advantage of jQuery is in its ability to work with the DOM, and create neat effects and animations. In this task, we will learn how to create our own image/content slider with the ability to load images dynamically.

Getting ready

We will need to prepare some example images and save them to our images folder. And, of course, we will need the jQuery library.

How to do it...

1. As usual, we will start with HTML code:

   <div class="slideBox">           
     <div id="slider1" class="mslider">
       <ul>
   
   
   <li title="1.jpg"></li>
         <li title="2.jpg"></li>
         <li title="3.jpg"></li>
         <li title="5.jpg"></li>
       </ul>
         
       <div class="navContainer">
         <div class="buttonsContainer">
           <span class="btnPrev button">Prev</span>
           <span class="btnNext button">Next</span>
         </div>
       </div>
     </div>
   &lt...