Overview

jQarousel is an interactive, sophisticated, intuitive Carousel Gallery Plugin based on jQuery. It uses an unobtrusive script and allows your visitors to scroll rapidly through a large amount of images, videos, etc. using their mousewheel or touch screen device.
Plus, it can be set up as a Slider!

Main Features

  • Multiple Instances - you can setup more than one jQarousel on the same page
  • Dynamic - it uses smooth effects and advanced gesture handling to enhance user experience
  • Customizable - you can personalize its appearance to suit your website's design and needs
  • Greedy - you can feed it with anything that has a size: images, videos, flash, divs, iframes ...
  • eCommerce - it is perfect to exhibit a large set of products on a single page

Examples

Note: the default presentation is without any frame.
Just below, it is presented within a resizable container - Notice the discrete little triangular icon on the bottom right.

{ "z": 80, "ab": 80, "cd": 300, "ef": 300 }





jQarousel demo Gallery

Arrow Cursor Slider Fashion Carousel Prestashop Featured 3by3 Autoplay

Simple Slider Youtube Videos Carousel Prestashop Category

You can view a demo with Modal.E.T here.

Usage

The following behaviour description applies to the default settings.
{ "z": 50, "ab": 50, "cd": 150, "ef": 150 }


Blue Zone .click
- a normal speed continuous scrolling occurs on mouse over
- a click stops the scrolling
- another click resumes it

Green Zone .click
- a slower speed continuous scrolling occurs on mouse over
- a click stops the scrolling
- another click resumes it

Red Zone .click
- a faster speed continuous scrolling occurs on mouse over
- a click stops the scrolling
- another click resumes it

Magenta Zone .click
- a click on the arrows provokes a 1 step scrolling
- a click on the slider bar moves the carousel to that position
- drag the slider handle across the slider bar to induce a controlled scrolling
- a click on the slider bar or handle activates it thus enables Arrow Keys navigation
- it also enables PageUp-PageDown and Home-End navigation

Big Carousel .click
- a scrolling occurs when using the mouse wheel or trackpad scrolling

Little Carousel .click
- a faster scrolling occurs when using the mouse wheel or trackpad scrolling
- a click on an item gets the carousel to center on it

Orange Zone .click
- it is the container of the whole carousel
- this area doesn't listen to any user events
- it covers fully the mother element in width by default
- it resizes automatically when the mother element does (div, body, etc.), like in the first example above


Note that these movements are not exactly the same - but are adapted - on touchpads.

How to

Part 0 - Unpack

  • Unpack the downloaded .zip file and place the following contained folders in your web page's directory :
          js/            css/            img/

Part 1 - Setup

  1. Include in your page header the necessary Javascript files - be careful to respect the order :
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <script type="text/javascript" src="js/jqarousel.min.js"></script>
  2. Also include the CSS file - before the Javascript declarations for better loading speed :
    <link type="text/css" rel="stylesheet" href="css/jqarousel.css" />

Part 2 - Use it

  1. Declare the jQarousel - notice the capital Q :
    <div class="jQarousel">				
    	<div class="big-content">						
    		...		
    	</div>
    	<div class="little-content">						
    		...				
    	</div>
    </div>
    
    You can invert the order of big-content and little-content as done in the second example above.
  2. Include your items in the big carousel you've just declared :
    <div class="big-content">						
    	<img src="images/image-1.jpg" title="image-1-title" />
    	<img src="images/image-2.jpg" title="image-2-title" />
    	...
    </div>
    
    or with links
    <div class="big-content"> <a href="page-1.html"><img src="images/image-1.jpg" title="image-1-title" /></a> <a href="page-2.html"><img src="images/image-2.jpg" title="image-2-title" /></a> ... </div>
  3. Include the thumbnail versions in the little carousel :
    <div class="little-content">						
    	<img src="images/image-1-thumbnail.jpg" title="image-1-thumbnail-title" />
    	<img src="images/image-2-thumbnail.jpg" title="image-2-thumbnail-title" />
    	...
    </div>
    
    Don't put links on the little carousel's images for the jQarousel to work properly and respect
    the same order as in the big carousel !
  4. Specify the sizes of your items via CSS

  5. That's it - if you want to use the default settings. To learn how to setup supplementary options and use the API :
    Follow the tutorials and examples provided in your jQarousel downloaded pack !

Purchase it .$12

  • jQarousel's license for a single website is provided for a small fee, on FastSpring.com.
  • You then get free access to new updates, tutorials and support.

Purchase v1.0 Now ! Read the Licensing Terms

  • Modern Browsers Friendly - compatible with Opera, Safari, Firefox, Chrome, IE7+
  • Device Compatibility - compatible with Android and Apple iOS devices
  • Library Compatibility - compatible with jQuery 1.7+ - (1.8 with jQuery UI 1.8.22+)

Q&A

Additional Features

  • SEO Friendly - all your content is explorable by search engine spiders and robots
  • Lazy Loading - optimize your bandwidth usage and startup time
  • Destroyable - jQarousel is a jQuery.widget that you can create, destroy and re-create at will
  • Autoplay - setup an auto-scrolling jQarousel to make it even more alive

What do I get in my jQarousel pack?



You get of course the javascript, image and css files. You also get:
  • .:  Advanced use case demo pages with explanations
  • .:  Supplementary js plugins to interact with the carousel and add accordingly effects to your items
  • .:  A step by step tutorial on how to integrate it to Prestashop
  • .:  An additional and more developed Q&A.


What if all my items don't have the same size?



All your items will be rescaled proportionally using their average width.


How many options does jQarousel propose?



33 including:
  • .:  Look&Feel properties
  • .:  Functional properties
  • .:  Optimization properties


I've developed a third-party plugin for jQarousel. Am I authorized to distribute it?



Yes, but you must first obtain permission from the author. You can use the contact form at the bottom of this page to submit your request.
In any case, you are NOT authorized to transmit or expose original jQarousel specific code or any modified version of such code.



Contact . help . troubleshooting . bug report

You can use the following form for direct contact but ONLY for bug reports.

:: Click here to show the Form ::








Can't read the image? click here to refresh!



Welcome !

A jQuery full Carousel

Art.Megiddo :: Genève