30 Best jQuery 3D Slider Plugins 2018 — update september
1.jQuery Waterwheel Image Carousel
This carousel will take a list of any number of images and rotate them out in either a vertical or horizontal fashion, cascading in with a nice simulated 3D effect. Currently only works with images that are the same dimensions. Many options to customize how it operates and looks. View my website for demonstrations and more.
3.SamsaraJS : Layout Animation library
SamsaraJS is a functional reactive library for animating layout. It provides a language for positioning, orienting and sizing DOM elements and animating these properties over time. Everything in SamsaraJS — from the user input to the rendering pipeline — is a stream. Building a user interface becomes the art of composing streams.
4.jR3DCarousel : jQuery 3D Responsive Carousel
jR3DCarousel is a jQuery plugin for responsive 3D carousel with modern effects and multiple options.
Features:
- Modern effects
- Responsive
- Fullscreen Carousel
- Tiny plugin (gzipped ~ 1.68KB, uncompressed ~ 4.95KB)
- Infinite scroll
- Multiple slideLayouts to maintain aspect ratio of images
- Minimal configuration, easy to install
- Useful public API for extending the functionalities like custom nav buttons.
5.Cloud 9 : jQuery 3D Carousel
A 3D perspective carousel using jQuery/Zepto focused on performance, based on the original.
6.Theta Carousel 3D : jQuery Plugin
Theta Carousel 3D is a jQuery plug-in that helps you quickly and easily organize your content in 3D space. The plug-in supports responsive layout with the auto scaling capability and is just perfect for displaying content on all screen sizes.
7.CardSlider : jQuery 3D Card-Style Image Slider
CardSlider is a responsive CSS3 3D Card-Style jQuery slider plugin which get inspiration from FWA landing page’s awesome slider.It can make images in to 3d card-style and animate them use CSS 3D transforms and CSS animations.
- Responsive.
- 3D Card-style with CSS3.
- Dark & Light Skins included.
- Pagination & Navigation controls.
- AutoPlay supported.
- Hardware Accelerated CSS 3D Transforms & Animations
- Slide in six direction width shadow and animations.
8.Carousel-3d : jQuery plugin 3D Carousel Slider
A simple 3D carousel widget. It supports all major browsers including IE8,9 with best effort. Full 3D effect requires css transform3d support browsers. And this widget works with not only images but any html elements as child.
9.Bee3D Slider : Touch-Enabled Pure JS Plugin
Bee3D Slider is a floating 3D slider and carousel plugin built with pure Javascript and CSS3 transformations!
Features:
- Touch-Enabled
- 9 3D Effects available, with more on the way…
- Autoplay, with optional pause on hover
- Infinite Loops
- Parallax effects, optional
- Auto-Focus on load
- Lightweight, 5KB minified
- Responsive Image Support
- Video Carousels
- Mobile-friendly
- Extensible callbacks
- Styles come in LESS, SASS, and Stylus
10.Cloud Slider : Responsive jQuery Slider Plugin
This is a responsive jQuery slider plugin. It supports many features like: responsive, touch enabled, smooth layered animation, 2d & 3d transitions, 12 easily customizable built-in skins, unlimited 2d & 3d carousels and category carousel, ken-burns effect, video embedding, powerful APIs.
11.Perspective Mockup Slideshow with CSS3 & JavaScript
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.
A while back, Franklin Ta wrote an article and made a really useful script for transforming an element in 3D in order to fit in a perspective mockup. In his article, he describes how the helper script can be used to create a 3D matrix transformation for embedding an iframe into a mockup image. We thought that it must be really interesting to add a slideshow in order to showcase ones work.
12. 3D Items Quick View with jQuery & CSS3
A simple 3D animation for your gallery items, to make it easy for users to discover more about your products without having to leave the page with jQuery and CSS3.
13.Swiper 3D Flow plugin for Swiper
3D Flow is the ultra small (1Kb minified and gzipped) and free plugin for iDangero.us Swiper that turns your great swiper slider (or app) into amazing realistic 3D gallery with dynamic shadows. It was inspired by iOS App Store homepage 3D slider.
It works in all browser that support CSS3 3D Transforms.In browsers that do not support CSS3 3D transforms it will work and look like a usual Swiper.
14.jQuery Tilted Page Scroll Plugin
Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin.With this plugin, you can create a beautiful scrolling effect and turn a simple layout website into something surprising.
15.Google Grid Gallery with CSS3 & JavaScript
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google.
This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view.
15.Hi Slider : jQuery eye-catching 2D/3D realistic Slider
Hi Slider makes it easy for anyone to create awesome eye-catching 2D/3D realistic jQuery Slider without any programming skills. Creating an image gallery slider and making a customized WordPress slider plugin have never been so easy and intelligent, even non-coders can design gorgeous jQuery photo slideshow. You just need to “Click to Select”! You can publish a gorgeous slider for your website within minutes!
16.Fancy 7 — jQuery Touch Image Slider / LightBox
Fancy 7 is one of the most complete image slider ever. It is built in latest jQuery and mobile compatible so anyone can easily use it without any restriction. And it is fully responsive and modern features like Video embed,Smart Lightbox are supported which make it more stunning.
Features:
- Premium 10+ fancy skins
- 380+ wonderful animations(2d,3d) — Animations will come more as new version released.
- Easy to implement and customize
- Unlimited slides — Users can insert as many slides as he wants.
- Native browser support
- Html5/Css3 transitions support — It uses html5/css3 transition for modern browsers.
- Image Lazy Loading — Fancy 7 loads all images at once so that he/she doesn’t wait again while slides.
- Image Preview support — Fancy 7 provides image preview option on hover.
- Customizable width and height — Width and height can be set.
- Fully responsive — It’s fully responsive so it can be attached in touch device.
- Full width functionality involved — Full width slider is available
- Lightbox support — It supports lightbox based on users’ demand.
- Touch device support — Touch events are supported.
17.Storyline 3D Slider with jQuery & CSS3
Storyline 3D Slider is a great plug-in for your template, which will make it have a stunning look. The S-3D-S will help you showcase your work in a splendid creative way. Your products has never been displayed so great!
If you are a proud author or musician or super talented designer, blogger or photographer — the S-3D-S is just for you! It offers 19 colour schemes, 8 scroll effects, 6 slide styles, responsive design, infinite scroll & possibility to work smoothly on mobile devices. You can include your own html code and make your own styles to fit your site.
Features:
- 19 color schemes
- 8 incredible scroll effects
- 6 different post styles (blog, circle, image, audio, book, text)
- 5 ways to navigate trough slides
- Responsive design
- Touch enabled
- Infinity scroll
- Lots of different post settings
- Custom image roll over settings
- CSS3 and JQuery powered effects
18.7 Slider : jQuery Responsive Image Slider
7 Slider is one of the most complete image slider ever. It is built in latest jQuery and mobile compatible so anyone can easily use it without any restriction. And it is fully responsive and modern features like Video embed,Lightbox are supported which make it more stunning.
Features:
- 250+ wonderful animations(2d,3d) — Animations will come more as new version released.
- Native browser support
- Html5/Css3 transitions support — It uses html5/css3 transition for modern browsers.
- Image Overall Loading — 7 Slider loads all images at once so that he/she doesn’t wait again while slides.
- Image Preview support — 7 Slider provides image preview option on hover.
- Customizable width and height — Width and height can be set.
- Fully responsive — It’s fully responsive so it can be attached in touch device.
- Full width functionality involved — Full width slider is available
- Lightbox support — It supports lightbox based on users’ demand.
- Touch device support — Touch events are supported.
- Mouse swipe navigation support — Swipe functionality is available so users feel comfortable to navigate.
- Video content support(Youtube,Vimeo) — Embeded videos are supported.
19.Bugibba : jQuery 3D transition effects SlideShow
Bugibba SlideShow easy to use slider with awesome 3D transition effects.
Features:
- 2 type menu slideshow responsive.
- 1 type slideshow full screen
- Adjustable transition speed.
- Compatible with all major browsers (IE7-IE8 and above , Chrome, Firefox, Safari and Opera)
20.Amazing Slider : jQuery & WordPress Image Video Slider
An easy-to-use Windows & Mac app for creating beautiful, professional, responsive jQuery Slider, YouTube Video Slider, WordPress Slider Plugin and Joomla Slideshow Module.Amazing Slider comes with awesome transition effects: Fade, Cross Fade, Slide, Slice, Blinds, 3D, 3D Horizontal, Blocks and Shuffle. Each effect can be further customised to meet your own needs. The pre-made and highly configurable skins can give your slider a professional and unique looking.
21.StackSlider: A Fun 3D Image Slider with jQuery & CSS3
StackSlider is a highly experimental jQuery image slider plugin that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective. The idea is to navigate through two piles of images where the transition resembles an item being lifted off from the top of the stack and moved/rotated to the center of the container to be viewed. The previously viewed image falls on the opposite stack.
22.CodingJack’s jQuery 3D Carousel
CodingJack’s 3D Carousel is a Real 3D using CSS3 3D Transforms carousel plugin with jQuery,Html5 & Css3
The carousel is supported on iOS and Android and includes touch swipe functionality. It looks great on a tablet and will even work on a smartphone. But because the carousel can appear small on smaller screens, I’ve included two special options for smartphones:
- Option to display a thumbnail grid instead (the “fallback” presentation)
- Option to transform the grid fallback into a responsive layout. View either preview from your phone for an example.
23.jQuery Cute Slider — 3D & 2D HTML5 Image Slider
Tired of boring flat sliders? Looking for a unique slider? Here’s what you want,with Cute Slider you will be able to show your slides with awesome 3D & 2D transitions.Cute Slider makes your ideas alive, It gives you desire,you can use it as an advanced 2D slider with tons of 2D transitions, or add third dimention to your slider and create a unique and inpressive 3D slider.
Features :
- 3D & 2D effects
- 100+ prest transitions
- 3 fallback levels(CSS3D, Canvas, 2D)
- Cross Browser
- Device friendly
- Youtuve and Vimeo videos
- Search engine optimized
24.Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery
Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible.
We’re going to write this code as a jQuery plugin, so first you need to include jQuery. Next we want to include a script called Modernizr. We only need 3D Transforms, and you can download the required script from here. This will ensure everything will work fine in browsers which do not support 3D Transforms. Then you have to make a file called jquery.pictureflip.js which will be where we’re putting our plugin code!
25.Triple Panel Image Slider in jQuery & CSS3
In this tutorial we will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, we will slide in the respective next image in each panel. We’ll be using CSS 3D Transforms with perspective and CSS Transitions.
26.Adaptor : jQuery 3D content slider
Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions.Currently, It has only added 3D support for webkit and Firefox, all other browsers will fallback gracefully to a simple fade transition when using the 3D effects.
All 2D slide transitions have been tested in IE6+ and all other modern browsers.
27.iCarousel : jQuery Carousel plugin
iCarousel is a powerful mobile-friendly and lightweight jQuery plugin that allows you to arrange a set of images in a carousel layout. The plugin also provides an easy to use API which will allow to further enhance the functionality of the carousel. Great for screenshoot slider.
Features:
- Highly Flexible and Customizable.
- Multiple instances allowed in a single HTML page.
- Works on iOS & Android devices.
- Auto slideshow with optional pause on hover.
- Easily resizable.
- Keyboard support.
- Touch support.
- 3D & 2D available.
- Customizable transition timing function. (easing)
- Fast, hardware accelerated CSS3 transitions.
- SEO friendly, content is not hidden.
- Powerful, documented API — public methods, properties, callbacks.
- Each slide can have any html content(except video) and can be any size.
- Customizable scroll direction.
- Customizable X & Y spaces between slides.
- Unlimited slides support.
28.FueledWeb Pro Thumbnail Scroller with jQuery
FueledWeb Pro Thumbnail Scroller is an advanced multipurpose jQuery plugin, html5 thumbnail scroller and image gallery.It is beautifully designed with 3D like effect and well developed with varieties of customization options, the plugin is perfectly used for product showcase, media gallery or item slider.
Features :
- Google font
- AdvancedLightbox
- Responsive Design
- Over 50 plugin options and 25 theme variables
- Custom look and feel of Scrollbar
- Option to auto start from center item
- Option to auto start slideshow with play and pause button
- 5 Custom Event Handlers:
- onSwitchItem
- onSwitchCategory
- onShowLightbox
- onHideLightbox
- onSwitchLightboxItem
- Custom theming with 3 built in themes
29.jQuery Featured 3D Slider
Featured 3D Slider is a jQuery plugin that converts static HTML content into a 3D stage with smoothly moving objects. It is very easy to integrate it in a WordPress theme or any website in general. Slides are just wrappers of whatever HTML content you can imagine — images, captions, links, buttons, icons.. even video embeds. Featured 3D is highly configurable. More than one sliders can be initiated on a single page, each one with its own configuration set of options. Please, check the live preview of this slider and get answer of the question “Is this possible without Flash, but just pure jQuery?”
30.Slicebox — A fresh 3D image slider with graceful fallback
With the CSS3 3D transformations we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback.
