JQuery image slider and JQuery image carousel
Something visual this week. Before I introduce the code behind the effect, let’s show you the image slider in action:
JQuery image transition effects
Give it about 6 seconds to start. Nice isn’t it?
This uses JQuery along with a really well written plugin called JQuery-Cycle (see link to the right of this page).
You simply include two javascript files, one for the plugin and the other adds about 25+ effects including sliding, zooming, turning and fading of images.
The images themselves are includes within a div. That’s it. Take a look at the code behind this page to see how it works.
A JQuery Infinite carousel
I discovered the second effect after looking through quite a number of different JQuery plugins, none of which did quite what I was looking for. On a client’s homepage, I needed to show a series of featured products for sale. The user should be able to click left and right to navigate the available products. When they reach the last product, the images should continue from the start.
Here’s the result:
You can find the link to the code and a tutorial to the right of the page.
Tags 3d Add new tag apple asp aspdotnetstorefront backups bugzilla cgi chrome cloud computing cms content management CRM css Document Management drupal ecommerce expression engine flash google hiring host hosting img_assist interprise JQuery KnowledgeTree mac mamp modules mouse nginx opencart php PRINCE2 printer project management snow leopard ssl tinymce Tips translation unix webgains wordpress
Is it possible to have this so the two out images fade, leaving the central one at full opacity?
Samuel: yes, it is!