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.
Slit Slider Revised

From our sponsor: Try Mailchimp today.

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.


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:


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.

Tagged with:

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

Feedback 75

Comments are closed.
  1. Hi,

    Thanks a lot with this slider !!! I’ve meet a bug with the jquery 1.7.1. The slider doesn’t work, it seems that it come from the event that never start :

    slice.css( slice2Style ).on( self.transEndEventName, function() {

    DO you know how to fix this ?

    Thanks a lot in advance !!

  2. Why the image backgrounds (demo 2) sometimes disappears? Is this a problem with the browser render or it just happened to me? Nice work!!

  3. Hey guys good job, why when you use it on a php page the script doesn’t work? if u rename the demo from html to php the demo doesn’t work, but it doesn’t work when you use the peace of code inside an existing file php as well..

  4. Hey guys, this is an awesome tut! I actually used it as the way to navigate a full site that I was doing.
    I’m just having trouble getting one of the public methods to work (probably because I’m not VERY new at coding).
    I need to click on a span (with a specific id) and have the slider do a ‘jump’ to a specific slide. How would I go about doing that (in the HTML & JS)?

    You can check out the site in
    If you go to “La Agencia” you’ll find a yellow span called “cobertura”. I’ve tried to make it so that by clicking there you’ll be taken to the 5th slide but I don’t quite understand how to make it work. Any chance you could help me out?? Thanks!!!

  5. Is it possible to just have dynamic slides? right now I have to markup for 1 slide then the dynamic slides will be added… so that that is the case… is there a way to hide the first static slide?

  6. There are still issues in Firefox 17.0.1 on Mac. Your demo 2 (using background images instead of solid colors) is very choppy looking. It looks great & smooth in Chrome on a Mac, and Chrome & Firefox on PC, but the Firefox Mac transitions are pretty ugly. Any fix for this?

  7. The tutorial is great! Thank you so much!
    Just one question – does anyone know how to adapt it for “swipe” gesture for mobile?

  8. This looks amazing but is there an easy way to get “classic” slide/fade animations to work with this as well (for someone who knows his way around html/css but desperately needs to catch up with jquery)?

  9. It seems that if you are having a bunch of radiobuttons on each slide (using this tutorial with SS: they lose state after switching slide. This happens when you set a “name” for the button sets. Works really good without the name attribute, although that makes it possible to select more than one. I’m not 100% sure but I believe that something in the slider makes the buttons drop their state.

  10. Thank you so much for this awesome tutorial!
    See our implementation of this slider:
    (We maintained the same structure! Only reworked the responsive part)

    Thanks again 😉

  11. hello i m using this slider and this is amazing but one thing i need slider background to be fade in and out when we click on controllers i do not want to use horizontal and vertical orientation plz reply asap


  12. Fantastic slider! Thank you!

    I’m having trouble in IE8 – the navigation buttons are missing and the slideshow is stuck on the first image with no way to the next one.

    I’m currently on jQuery 1.8.2. I tried jQuery 1.9.1 but that totally breaks SlitSlider.

  13. Awesome slider!

    I’m trying out demo2, is it possible to add several sliders on the same page? Thanks.