O'Reilly logo

PHP Ajax Cookbook by R. Rajesh Jeba Anbiah, Roshan Bhattarai, Milan Sedliak

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required