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 Manoela Ilic in Articles on
Slit Slider Revised
Demo Code

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.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Creating an Interactive 3D Bulge Text Effect with React Three Fiber

Magnetic 3D Grid Interaction with Content Preview

How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

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();

  23. 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 !!

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

  26. 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..

  27. 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 http://labs.lionelfernandezroca.com/demo/ayp/
    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!!!

  28. 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?

  29. 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?

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

  33. 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)?

  35. It seems that if you are having a bunch of radiobuttons on each slide (using this tutorial with SS: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/) 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.

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

    Thanks again 😉
    Cheers!

  38. 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

    thanks

  39. 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.

  40. Awesome slider!

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

  41. Agree with Salina!
    “…Just one question – does anyone know how to adapt it for “swipe” gesture for mobile?”

    A simple swipe function would be really great!

    Keep up the great work!

    • You can use the jQuery touchswipe plugin : http://www.awwwards.com/touchswipe-a-jquery-plugin-for-touch-and-gesture-based-interaction.html

      You need to include jquery.touchswipe.js and use the following code
      $("#slider").swipe({ swipeLeft:function(event, direction, distance, duration, fingerCount) { if(fingerCount == 0){return;} // remove if you want mouse to trigger event slitslider.next(); }, swipeRight : function(event, direction, distance, duration, fingerCount) { if(fingerCount == 0){return;} // remove if you want mouse to trigger event slitslider.previous(); } });

  42. Very nice tutorial!
    I try to use this in a project in Local it’s work perfect but when I was published in the server it dosen’t work. Someone have one idea why it dosen’t work? Thanks

    • Hey Betty, Was everything just pushing to the left? I am having the same problem. Can you tell me how you fixed it? Thank you

  43. Hi there,
    just love this piece of work. Is there any chance to paste a code snippet in to pause the slider on hover? I would appreciate that very much.

    Have a great day.

    Mark

    • Have you had any feedback on this ?

      I am not a javascripter and cant figure out how to set the slider up without changing the core file (jquery.slitslider.js)

      Is there a demo anywhere that shows this ?

      I would like to be able to set-up the transition speed, pause on hover and autoplay

      Any and all help is welcome

      Cheers
      Rob

  44. Hi guys,

    This beautiful slider doesn’t work with android 4. It just stops dead after the 2nd slide.
    Can anybody help with that issue.
    TA
    Zel

  46. Tengo una pregunta, ¿como hago para que el slideshow no vuelva y comience? detener el loop… ¿¡Stop loop!?

  47. Im confused on how to add other elements for Resizing based on windows with.

    H2 seems to be talking to the Jquery, but can’t understand how to resize a h3, h4, or p tag.

    Any help would be amazing!

  48. Great script…
    I’m looking for a solution (calling a function) to go to a specific slide when I click on a link….
    something like this :
    <a href="#" onclick="goto(3)">slide3</a>
    Thks a lot for your reply

  49. Beautiful slideshow. I was trying to disable the slide show. is there a way to remove the forward button from the last slide and the back button from the first, I tried adding the nav to the individual slides but the transition would break on the second slide.

    Any help would be greatly appreciated!!!
    Thank you!

  50. Hallo,

    is it possible to use an menu with links like this

    <a href="#ID-SLIDE-2">Show Slide 2</a>

    Thanks Marc