Slit Slider Revised

Slit Slider is a slideshow with a twist: when navigating the slides, the current one will be "cut open" into two slices and moved away, revealing the next or previous slide. The slider can be used in a responsive context and it has been updated and improved.
By in News & Updates on
Slit Slider Revised
View demo Download Source

From our sponsor: Prepare for advanced communication roles and earn your Northwestern master’s degree online.

We have updated the Slit Slider tutorial, fixed some issues and made the slider responsive. Check out the original tutorial to find out more about it and how to use it.

Demos

We’ve improved the original demo and because of some requests we’ve added another one which shows how the slider can be used in full width, fixed height and background images. Both of them are responsive:

SlitSlider_demo2

Summary of Changes

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

  • The slider can now be used in a responsive context, simply set the wrapper’s width to a percentage and it will adapt.
  • The Transit plugin was removed.
  • We’ve added public methods for navigation control: next, previous and specific slide. This will make it possible to use custom controls.
  • Keyboard navigation has been added (right and left arrow keys).
  • The Firefox bug has been fixed.
  • We’ve added callback functions for before and after each slide transition.
  • New method for dynamically adding new slides.
  • Some other bug fixes, like flickering etc.
Find this project on Github

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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 75

Comments are closed.

  2. GREAT! Many thanks…

    The only issue that it’s not working in IE9?
    Any way to fix this, at least to show the image with captions?

    • Tested with the latest firefox (16.0.1) for Mac and Windows (7 & Vista) and it works fine. You? BTW, what exactly doesn’t work? Thanks, ML

  8. Awesome,.. amazing, …. but it is sad to say…

    !! always the same problem with shitty browser

    • As long as there is a graceful fullback then there isn’t much a problem.

      It looks pretty awesome. I may have to remember this for a future project I work on! Thanks and keep up the good work.

  11. Hi, Im having difficulties viewing it on chrome, can you fix it please or tell me more or less how to fix it ? Thank you

  12. This works really nice on firefox now, but now, cant make transitions properly on google chrome, dont know why, because this works on Safari and use webkit too.
    I have to say that you are an incredible designer, i love your work, seriously 🙂

  13. yep it looks like it tries to start animate and stop, in opera there is no animation at all….great slider but it needs to support main browsers …thanks!

  15. Hi. I found the Autoplay – Funktion. Is it possible to pause the slideshow on mouse over? Can someone help me please?

  16. Thanks awms for your answer, i checked my jquery version and its the current version 1.8.2 and still having the same problem on chrome :/

  18. Hi,

    Awesome script, only when I interrupt the autoplay by clicking on a image button, it does not continue in autoplay mode. Anyone a fix for this?

    Thanks again!

  19. I accidentally posted this comment in the previous version of this slider. First off… fantastic job! I love the second demo slider and the text animations… but not a big fan of the slicing effect (which is ironic I know – because that is the main intention of this). Anybody out there know how I can just make them fade? Great article again… would love to use this slider sans the slices. Cheers!

  20. Hello, i’m experiencing problems with the slider.

    When I switch to another tab in my browser (firefox, safari, chrome) and choose to come back to my website with the slider, the navigation freezes and can not be used to select another image. Also the autoplay stop when selecting a image..

    Does anybody know a fix for this?

    • If you do not want the slider to stop every time you manually change a slide, you have to remove the following lines of code from jquery.slitslider.js :

      this._stopSlideshow();

      and

      self._stopSlideshow();