Slicebox Revised

Slicebox, the jQuery 3D image slider plugin, has been updated. We've done some major improvements and added new features.
Slicebox Revised

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

Welcome to the News & Updates section on Codrops where we will be announcing updates of older scripts and tutorials with improvements and suggestions you have sent to us or left in the comments. We will also add these updated scripts to GitHub.

Slicebox – A fresh 3D image slider with graceful fallback has been updated! There are some new features and improvements that you have asked for and the project is now added to GitHub. Check out the original article to find out how to use it and view the demo.

Summary of Changes

A lot of changes were integrated into the new Slicebox, here are the most important ones:

  • Slicebox is now responsive.
  • The images can now be wrapped into an anchor. You can also leave the image without an anchor around or have a mix of both cases (see the original original article for more details on the structure).
  • The description is not taken from the title attribute of the image any more. There is a separate container for that and you can add any markup.
  • The description is now always shown.
  • It’s now possible to jump to any slide with a new method.
  • You can randomize the orientation and the number of slices.
  • Support for Firefox added

Tagged with:

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 33

Comments are closed.
  1. In a world that changes so fast like the web, you show why this is the best blog about development in the web. Always alert and useful to the community. The idea of updated scripts is amazing!

  2. Thanks a lot guys, glad you liked it!
    @W. I am assuming you would like to have the play/pause buttons also included? If so, just take a look at the second demo’s code and you will find the necessary structure for those buttons. You will also find the events that are attached to those same buttons in the js section bellow. Hope it helps. Cheers

  3. AMazing…
    thanks for sharing..
    i am a blogger user so is there any way to use these sliders for featured posts or popular posts or recent posts?
    thanks

  4. Hi,

    It would also be good if you could include an updated Demo link as well, instead of going to a third party site for the files.

  5. In Android browser, animation breaks apart when you cycle through it backwards (previous button).
    It shows previous image correctly, just the animation part is all messed up, cubes dispersal, blink or you can see through them.
    When it goes forwards, everything is okay.

  6. Thank you, I waited for support to anchor since I discovered Slicebox.
    In IE does not work, but you can use a browser check and switch to simple slider.
    Thank you again. 🙂

  7. Hi Pedro

    Just to mention what I think is a bug.
    On your standard demo, exemple 2, slideshow running automatically, il you resize during animation, the image disappear/reapper now has a consequence of modified overflow setting.
    I tried without success to find a solution. Could you help on this subject?

    Thanks
    Daniel

  8. Hi

    Can I stop the rotate animation. I have made an hover effect, so I need to stop the animation.

    Thanks
    Marco

  9. Hi!
    Great plugin, love it. But I am having strange behavior in Chrome (Version 23.0.1271.95 m) on Windows7 and in Safari (Version 5.1.5) on Windows7 & iOS 4.
    Check the site: http://www.agroturizam-konavle.hr.
    Can anyone help me with this?

    Thanx in advance!

    Ivica

  10. Sorry, I’ve just find what i was doing wrong: i was using jquery 1.7.
    I updated jquery to 1.8 and now everything works fine.

  11. Hi, I was wondering if anyone happened to know of a tutorial or YouTube video (or something to that effect) that would help me understand better how to implement this in a webpage, specifically in the infocus WordPress theme?

  12. Daniel,

    autoplay is “jquery.slicebox.js” inside:

    autoplay : true,
    // time (ms) between each rotation, if autoplay is true

  13. greetings! do you have a tutorial for inserting this img slide into a website, using dreamweaver? thanks

  14. Hi,
    i use this slider in my theme. it was working fine, but in autoplay version whenever i try to move to the next slide using navigation control, the autoplay was not working.

    The same problem was in parallax content slider and elastic image slider of auto play version…

    can you help me.

    Thanks in advance