S6

3D Touch Slider For Mobiles

... and six sides of fun

Amazing 3D Animation

With Hardware Accelerated Transitions

... where supported

Any HTML Inside

You can put any HTML inside of slide with any layout, not only images!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum aliquet nisl, non consequat velit gravida ac. Pellentesque habitant morbi tristique senectus et netus.

Link to iDangero.us

Phasellus congue congue libero, sed interdum eros sollicitudin eu. Phasellus rhoncus facilisis tristique. Suspendisse potenti. Suspendisse potenti. Nunc laoreet suscipit eros, non congue libero tempus vel. Etiam vestibulum, lacus ut sagittis tincidunt, purus elit elementum ipsum, id venenatis mi sem nec leo.

Flexible As Possible

Comes With Ultra Rich API

S6's API allows you to create your own pagination, navigation, run up to 5 callbacks, configure a lot of options to match any of your needs!

About S6

iDangero.us S6 - is the premium ultra lightweight 3D touch slider for mobiles with hardware accelerated transitions (where supported), amazing 3D animation and native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works on latest Androids and latest Desktop browsers with support of 3D Transforms. S6 is created by iDangero.us

Change Log

iDangero.us S6 1.5 - Updated on May 22, 2013

  • New nice "grab" cursor
  • New option to automatically prevent links clicks during dragging/touching the slider
  • New keyboard control option. Now it is possible to switch slides with keyboard arrows
  • New "active"/clickable pagination that will produce transition to appropriate slide
  • Few more api features and improvements
  • Minor fixes

iDangero.us S6 1.4 - Updated on January 11, 2013

  • Now it can be also used with 3 slides
  • Improved perfomance
  • Fallback to Swiper for IE10
  • Lot of minor fixes

iDangero.us S6 1.3 - Updated on October 11, 2012

  • Lot of minor fixes
  • Improved perfomance
  • New API mthod for slide to any slide, for example to make active pagination
  • Updated documentation

iDangero.us S6 1.2 - Updated on April 11, 2012

  • Improved mouse events to get the same behaviour as on touch devices
  • Fixed bug when using fluid (responsive) S6 to re-calculate slides' position on window resize
  • New method to 'destroy' attached events to release browser's memory
  • Now S6 can be used with any number of slides, not only with 4!

iDangero.us S6 1.0 - Initial release on April 1, 2012

Attention! Your browser do not support 3D Transforms

Seems to be your browser do not support CSS3 3D Transforms. S6 works now in fallback mode with Swiper. You can check video bellow to see how it works on browsers with support of 3D transforms:

Features

  • 1:1 Touch Rotation

  • Touch Emulation. This function will be useful if you are going to use S6 on desktop sites. In this case S6 will accept mouse events like touch events (click and drag to rotate slider)

  • Vertical/Horizontal. S6 comes with 2 main modes - horizontal (for horizontal rotation and horizontal swipes) and vertical (for vertical rotation and vertical swipes)

  • S6 - Six Sides Of Fun. S6 has six 3D sides / faces - 4 four slides and 2 back-faces for realistic appearance when you use not centered perspective, like on the demo with 4 cubes (see bellow). But S6 can be used with any number of slides, not only with 4 slides.

  • Free Mode. When this mode enabled slider will not have fixed positions (see demos bellow)

  • Rotation/Resize Adjustment. S6 will be reinitialized after rotation/resize of device/browser

  • Responsive. Can be used with a width or/and height defined in percents, not fixed. Useful for usage on devices with a different resolutions

  • Scroll Prevention. S6 will prevent vertical scroll when you touch it in "horizontal" mode, and horizontal scroll in "vertical" mode

  • Dynamic Shadows. If enabled S6 will generate dynamic shadow for slider, it will be rotated (in horizontal mode) and scaled (in vertical mode) when slider is rotating. You can also set the scale and offset of shadow

  • Built-in pagination control. Can be disabled

  • Auto Play. Just set the delay and S6 will change the slides (rotate) automatically until you touch it.

  • Any HTML. You can put any HTML content inside of slide, not only images

  • Rich API. S6 comes with very rich API. It allows you to create your own pagination, "next" and "previous" buttons, "play" and "pause" buttons and comes with 6 callback functions which allow to make slider's transitions a part of environment's animation (like on the demo above)

  • Flexible Configuration. S6 accepts a lot of parameters on initialization to make it much flexible as possible. You can configure animation speed, mode (vertical or horizontal), free mode, enable/disable pagination, auto play, back faces, configure dynamic shadow, etc.

  • Open Parameters. Many of S6 parametric options (like animation speed, free mode, etc.) can be changed on the fly after the S6's initialization.

  • Compatibility. S6 compatible with browsers which support CSS3 3D Transforms, like Mobile Safari (iOS), latest Android's native browser, Google Chrome, Safari, latest FireFox etc.

  • Fallback. S6 comes with amazing feature if you want to use it on many devices (browsers) which may not support 3D Transforms. In this case you need also to include Swiper (it's free) and if browser don't support 3D Transforms, S6 will detect it and switch the slider to Swiper automatically for graceful degradation!

  • Libraries. S6 is intended to use with jQuery (jQuery Mobile) or Zepto JavaScript libraries.

  • Easy to use. Due to the simple API and clean HTML layout you may need up to 5 minutes to integrate S6 to your site or app

  • Documentation. S6 comes with full illustrated PDF documentation.

  • Ultra lightweight. Only 3.4 KB minified and gzipped

Cute Demos

Vertical mode,
custom shadow offset

Slide 1
Slide 2
Slide 3
Slide 4

Horizontal mode, free mode, custom shadow offset

Slide 1
Slide 2
Slide 3
Slide 4

Four S6 cubes with mutual Perspective.

Try to swipe
Try to swipe
Try to swipe
Try to swipe
in vertical
in vertical
in vertical
in vertical
direction to
direction to
direction to
direction to
rotate it
rotate it
rotate it
rotate it

Fullscreen 3d Demo

This demo demonstrates responsive features of S6

Launch Full Screen Demo

Navigation / Pagination, Vertical Mode

Callbacks

This demo shows all 6 available callback functions, it also prints index number of active slide and rotate angle of the slider

Slide 1
Slide 2
Slide 3
Slide 4

Usage Example

1. Add to HEAD S6's CSS and JS:

<head>
  ....
  <link rel="stylesheet" href="path_to/s6/idangerous.s6-1.0.css">
  <script src="path_to/s6/idangerous.s6-1.0.js"></script>
  ....
</head>

2. Use the following HTML layout:

<div class="s6-container">
  <div class="s6-wrapper">
      <!--First Slide-->
      <div class="s6-slide">
        <!-- Any HTML content of the first slide goes here -->
      </div>
      
      <!--Second Slide-->
      <div class="s6-slide">
        <!-- Any HTML content of the second slide goes here -->
      </div>
      
      <!--Third Slide-->
      <div class="s6-slide">
        <!-- Any HTML content of the third slide goes here -->
      </div>
      
      <!--Fourth Slide-->
      <div class="s6-slide">
        <!-- Any HTML content of the third slide goes here -->
      </div>
  </div>
</div>

3. Initialize S6 on document ready (or when window is loaded):

<script type="text/javascript">
  $(document).ready(function() {
    var myS6 = $('.s6-container').s6();
  })
</script>

As you can see it is ultra easy and simple

Download / Pricing

  PRO Version
Single / Multi
Extended Version
Single / Multi
Price $10 $80 $100 $250
License
You can find more detailed information about these licenses right after this pricing table. Or you can read full licensing terms on the Licensing Terms page
RL Limited 1 RL Limited 1 EL 2 EL 2
Plugins jQuery / Zepto jQuery / Zepto jQuery / Zepto jQuery / Zepto
Usage in Websites/Apps

In Pro version the usage of S6 is limited to a single application (in single version) and to 10 applications (in multi version)

1 10
Usage in Projects/Products For Sale
With S6 Extended License you can use it in website template, app, paid game, or other software project for sale. Purchasing this version you will also get the signed License Agreement between You and Us for some specific project
1 5
Support

For Pro version we help to solve any problems with S6 integration, customization, and will fix any bugs or errors that may occur.

For Extended version we provide additional script's customization to match any needs

Lifetime Updates
Documentation and Demos
S6 comes with 12 pages full illustrated PDF documentation and live demos
Features
Callback API
External API
Dynamic Shadows
Swiper Fallback
Auto Play
Pagination Control
Touch Emulation
Purchase
Purchase Purchase Purchase Purchase Purchase
 

1 RL Limited - iDangero.us Limited Regular License. The difference between RL and RL Limited is that your use of the S6 is limited to a single application (Single version) or to 10 applications (Multi Version). Read full Licensing Terms.

2 EL - iDangero.us Extended License. This license gives you a right to use S6 in website template, app, paid game, or other software project for sale. Purchasing this version you will also get the signed License Agreement between You and Us for some specific project. Read full Licensing Terms.

Amazing Offer - iDangero.us Total Bundle

Total BundleIncredible bundle for incredible price. All iDangero.us items just for so attractive price. This bundle is a good way to save some money and to replenish your templates / plugins collection with 20 premium items (including Chop Slider 2 Pro-Single and S6 Pro-Single) just for...
...just for $80

iDangero.us Sliders Bundle

Sliders Bundle

The world's most powerful and eyecatching jQuery and Wordpress Sliders for such affordable price. Everything you need to impress your visitors:

  • Chop Slider 3 (jQuery and Wordpress plugins) - greatest and the most eyecatching animated jQuery image slider. Live Demo
  • mOover (jQuery and Wordpress plugins) - ultra slick and fancy content slider. Live Demo
  • S6 (jQuery and Zepto plugins) - innovative 3D touch slider for mobiles. Live Demo

...just for $30

Have Questions or Find a Bug?

If you have any questions about S6 itself, about Licensing, or find any bug or error feel free to contact us via Contact Page or using Support Ticket