RoyalSlider – Touch-Enabled jQuery Image Gallery

New version of RoyalSlider with tons of new features, like video support, full screen mode, global caption, new skins e.t.c. coming in May. Follow me on Twitter or join my email newsletter (unsubscribe at any time, mailchimp) to get notified about it (update is free for those who already bought slider).

RoyalSlider is easy to use jQuery image gallery with animated captions, responsive layout and touch support for mobile devices. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

Using WordPress? Take a look at RoyalSlider WordPress Plugin.

RoyalSlider Features

• Touch gestures navigation for iOS, Android and other touch devices.
• Animated HTML captions with custom effects (fade, move top, move right…).
• Smart lazy loading – after current image is loaded slider starts load two images near it. Can be disabled. View demo with lazy loading.
• Super smooth hardware accelerated CSS3 transitions for supported touch devices (new in version 5.0). Tested on iPad, iPad 2, iPhone 4, HTC Desire and Blackberry PlayBook.
• Adjustable speed, transition and easing for each caption or slide.
• Static content for each slide is allowed. View demo with static content.
• Move or fade transition for slides.
• Responsive down to mobile (applies for slider area and images). View responsive demo.
• Slides with a speed of swipe.
• Ability to remove drag navigation using mouse.
• Optional loading screen.
• SEO optimized, captions can use any tag you want (“h1”, “h2”, “p”...).
• Auto slideshow with optional pause on hover.
• Public methods, properties and callbacks (go to slide, play slideshow e.t.c.).
• Set start slide index and spacing between slides.
• Can be easily loaded using ajax, has destroy() method.
• Customizable interface (add/remove arrows, bullets).
• Thumbnails or bullets for navigation.
• Thumbnails scroller with adjustable speed, easing and advanced navigation logic to improve user experience. Can be disabled.
• Multiple instances allowed in a single HTML page..
• Custom scale mode for images. (fit into area, fill area, or do nothing)
• Layered photoshop files included.
• Compatible with all major browsers (including IE7 to IE9 , Chrome, Firefox, Safari and Opera)
• Three skins included: “Default Black & White”, “3d iSkin” and “Minimal”. (PSD included)
• Any HTML content can be placed inside slide. (except HTML5 video tag)
• Extended HTML documentation.
• Free support and upgrades.

View slider demo on your mobile device

What are buyers saying:

“We use Royalslider for the website of our iPhone/iPad game Gluddle. We’re very impressed by the out-of-the-box possibilities that this plugin offers and we’re very happy with it, as our site looks great on all iOS devices as well as the regular browsers. Great functionality and very stable plugin!”
Creative Heroes demo: http://gluddle.com.
—creativeheroes.nl

“I’m using the stand-alonge version on my portfolio for the full-browser slideshows on my case studies. One of the best and most well-documented plugins I’ve ever used.”
—ahrengot

“Fantastic slider though. Very easy to use and style. I started off using anythingslider and it was far to complex for everything i wanted it to do. This slider does it all with ease.”
—gwhite83

“Wow I am loving this slider. I’m a novice at coding and this app is well documented and easy implement compared to other products. Great Job.”
—mrdav1

You can find more reviews from real buyers in comments page.

Real world examples:

• http://www.parkcitylive.nl/
• http://gluddle.com/
• http://www.foursonsinteriors.com/
• http://ahrengot.com/work/puma-microsite/ (click on project thumbnail)

Want to get in here? Send me a link to your site with RoyalSlider.

My featured plugin

RoyalSlider Version History

Version 8.1 – 21 Jan 2012

• Added option to make slider responsive automatically using js, without any media query tricks.

Version 8.0 – 16 Dec 2011

• Improved navigation swiping algorithm. Check out demo.
• Fixed rare bug, when navigating during device rotation.

Version 7.9.2 – 17 Nov 2011

• Fixed orientation change bug in some mobile browsers.
• Added !important to margins and paddings of list elements.
• Fixed touch navigation in iOS with jQuery 1.4 and lower.

Version 7.8 – 10 Nov 2011

• Fixed image loading bug on BlackBerry.
• Fixed fade bug in some browsers.

Version 7.7 – 08 Nov 2011

• Improved navigation logic. Added javascript property that allows touch-dragging simultaneously only on one axis (turned on by default).
• Fixed slideshow pause on hover bug on some devices.

Version 7.5 – 03 Nov 2011

• Added fade transition option to slides (see changelog in docs for more info).

Version 7.0 – 20 Oct 2011

• Added three new awesome skins, updated CSS files.
• Added dragUsingMouse js property that adds/removes dragging functionality using mouse, but leaves dragging with touch.
• Added spinner animation instead of ‘Loading image…’ text.
• Thumbnails scroller now can be fluid and can be placed anywhere.
• Fixed IE7 artifacts for some skins.
• Dragging cursor is now set using CSS and uses .png cursor by default.
• Hide arrow on last slide js property is now set to true by default.
• Welcome screen js property is now set to false by default.
• Pixelated text in IE8 and lower is now fixed automatically, but you still can use “removeCaptionsOpacityInIE8” js property.

Version 6.0 – 30 Sep 2011

• Added property to set start slide index.
• Added property to set spacing between slides.
• Added property that blocks navigating to url when dragging element with link.
• Added property that prevents dragging completely on all elements that have specific css class.
• Added public method that works exactly like goTo() method but navigates to slide without animation.
• Improved destroy() method that removes slider element and cleans up all events. Use slider with Ajax easily now!

Version 5.1 – 12 Sep 2011

• Fixed sizing issue when height auto is set and slider isn’t in display list.
• Fixed stop and resume slideshow public methods when pause on hover is enabled.

Version 5.0 – 4 Sep 2011

• Major performance optimization for iOS, Android and Blackberry touch devices that support CSS3 3d transforms. (can be disabled)
• Added keyboard arrows navigation option.
• Changed default behaviour for images scaling and centering (see changelog in docs for more info).
• Other small performance optimizations.

Version 4.0 – 30 Aug 2011

• Smart lazy loading – after current image is loaded slider starts load two images near it. This option can be disabled.
• Now slider is using image tags istead of background-image css property for better SEO .
• Custom scale mode for images. (fill the area by default)
• Updated thumbnails scroller logic – if you’re clicking on last thumb in a row, so scroller will move only by one image, but if you click on arrow so scroller will move by five images to prevent too much animation.
• Now you can set thumbnails size and spacing more easier.
• Added more detailed documentation.
• Fixed some small bugs.

Version 3.0 – 24 Aug 2011

• Added optional thumbnails scroller with adjustable speed and easing (note that thumbnails scroller doesn’t support dynamic resizing for now).
• Completely rewritten class and changed initialization, to comply with jQuery plugin standarts and fix compability issues.
• Fixed “jumping” on top when clicking navigation.
• Fixed resizing of multiple slider instances on one page.
• Other minor performance improvements and bug fixes.

Version 2.0 – 18 Aug 2011

• New 3D skin.
• New content slider example.
• Autoplay slideshow property.
• Important bug fixes and performance inprovements.

Version 1.1 – 14 Aug 2011

• Added option to auto hide right arrow on last slide and left on first slide. Always applied for touch devices.
• Some minor performance improvements.

Images in preview: Fotolia, John&Fish. Are not included in download pack.