Boutique Carousel

Boutique Carousel


A unique customizable jQuery image slider with perspective and smooth interactions.

Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose.
Full documentation and examples included.

Please check the FAQ before purchasing.


  • Unlimited scrolling
  • Unlimited number of images
  • Customizable
  • 14 Example styles/usages out of the box
  • Fluid width (suitable for responsive layouts)
  • Optional headers
  • Optional description text
  • Optional hyperlink
  • Optional autoplay (paused on mouse-over)
  • Keyboard support
  • Lightbox support
  • Right-to-left language support
  • Multiple instances per page
  • Uninterupted navigation (try quickly tapping the arrow keys on your keyboard)
  • Advanced: External functions
  • Advanced: Callback functions
  • Contains fully commented source code
  • Contains documentation/help file
  • Contains example cases to get you started

New in version 1.5.4 (august 2015):

  • Added support for Velocity.js. If you have velocity included in your project, Boutique will now automatically make use of it.

New in version 1.5.3 (august 2014):

  • Fixed keyboard navigation errors after removing Boutique from the page
  • Updated the Fancybox example file showcasing gallery support
  • Removed “lightbox_support” option. See the example files for the recommended way to trigger a lightbox
  • Fixed several occasions where image dimensions could get distorted
  • Added a Touch/Swipe event example

New in version 1.5.2 (july 2013):

  • Fixed a bug where Boutique was not responsive with “frames” set to 3
  • Cleaned up CSS and style customization
  • Updated Fancybox example to match newer versions of that plugin
  • You can now supply your own tags instead of just the image’s alt-attribute for header text. Example:
    <h2 class="boutique-frame-title">Frame title</h2>
  • Similarly, you can now supply your own tags for the description text (previously had to be a span), as long as you give it the boutique-frame-text class. Example:
    <p class="boutique-frame-text">Frame description</p>
  • The link_callback function now prevents default link behavior unless it returns true
  • Slight performance improvements

New in version 1.5.1 (2012/10/08):

  • Optimized for jQuery 1.8+ (deprecated ‘hover’ event, deprecated $.browser method)
  • Fixed minor hover positioning bug introduced in v1.5
  • Added right-to-left language support (new plugin option “right_to_left”)
  • Included right-to-left language example page
  • Included arrow buttons example page
  • Included navigation bullets example page
  • .boutique() now returns the jquery object, so you can continue chaining
  • Improved the text_front_only option in IE
  • Fixed several other IE issues (mostly related to using variable image heights)
  • Changed option “front_img_height” default to ‘auto’
  • Changed option “container_width” default to ‘auto’ (fluid width)
  • The frame top-margins moved from CSS to plugin options “front_topmargin”, “behind_topmargin”, “back_topmargin”
  • Slight performance improvements
    Note: The required jQuery version has been bumped to 1.6.1+
    Note 2: When upgrading, you should check if the vertical aligning is still ok, or (re)set it with the new options “front_topmargin”, “behind_topmargin”, “back_topmargin”

New in version 1.5 (2012/05/28):

  • New plugin option: frames (number of visible frames (3 or 5)).
  • New plugin option: variable_container_height (If your images have different heights, this will make the container height adapt to the visible frames).
  • Plugin option “front_img_height” can now have the value ‘auto’, to deal with images of different dimension ratios. The width will still be a shared value.
  • New included example: Mixed image ratios.
  • Removed the redundant plugin option “hoverspeed”. The hover animation speed is now always “speed” devided by 4 (it will still work if you have already set a manual hoverspeed).
  • Changed some plugin option names to be more logical/readable, such as “back_opac” to “back_opacity” (old names will still work).
  • Removed the (previously hidden) span and h6 tags on frames with no titles/descriptions.
  • Slight performance improvements.

New in version 1.4 (2012/01/08):

  • New plugin option: lightbox_support
  • New plugin option: stop_autoplay_on_click
  • New external function: boutique_stopautoplay() to trigger autoplay
  • New external function: boutique_startautoplay() to trigger autoplay
  • New external function: boutique_goto(frame-number) to jump to a specific frame number (it will automatically pick the shortest route)
  • New callback function: pre_move_callback(anchor, instance-id) that’s triggered when a movement starts
  • Better/easier fancybox (and probably other lightboxes) compatibility (example included) and now supporting fancybox galleries too
  • Bug fix: frame-link-clicking-not-reacting bug, created in version 1.33
  • Added more example cases that you can learn from / copy/paste from:

    • Basic example
    • Simulating 3 frames
    • Using Boutique with Fancybox
    • Responsive / fluid layout (dynamic 100% width)
    • Callback functions
    • External functions
    • Straight line
    • Content div
  • Default easing types are now included in the plugin. You can still use the external easing plugin if you are especially picky on your easing or want to add some special effects
  • Improved support for future jQuery versions
  • CSS flexibility improvements
  • Performance tweaks

New in version 1.33 (2011/09/10):

  • Fixed a compatibility issue with jquery 1.6+ (header text became “undefined” when left empty)
  • Moved some CSS to plugin settings to have a clearer seperation of settings/styling
  • Nicer default easing types
  • 100% width now takes the parent element’s width (not always the body width)
  • Basic setup example included
  • Fancybox example included
  • Note when upgrading: The names of some of the plugin options have changed.

New in version 1.32 (2011/05/12):

  • Fixed bug introduced in v1.31 (links of distant frames firing on click)
  • Added behind_distance as plugin option (option to manually set the horizontal distance of frame 2 and 4)
  • Minor usability tweak (images are now undraggable (in supporting browsers))

New in version 1.31 (2011/05/03):

  • jQuery version compatibility fix: zooming the center frame on mouseover (now works with 1.4.1+)
  • jQuery version compatibility fix: frame border animation (now works with 1.3.0+)
  • All frames now have the simple class names: frame1 – frame5 (so you can easily target them by CSS or javascript) (center frame = .frame3)
  • Minor performance tweaks

New in version 1.3 (2011/02/22):

  • Plugin option container_width can now be ‘100%’ (full page width). The width will adapt when resizing the browser.
  • Added move_on_hover (navigate with mouse-over instead of click) as plugin option. Depending on your setup, this will work better if you set freescroll to false.
  • Minor performance tweaks.

New in version 1.2.1 (2011/01/18):

  • Added keyboard (enable/disable keyboard functionality) as plugin option so you can disable/enable it.

New in version 1.2 (2010/10/18):

  • Container width, front frame image width/height, text area opacity are now plugin settings (so editing the CSS is now more optional)
  • New plugin option: text_front_only (true by default)
  • External functions for custom previous/next buttons
  • Callback function for after clicking a frame with link
  • Callback function for after moving left/right

Also described in the examples and instructions.
Note: all previous settings / CSS will still work in the new version so you can update safely.