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.

Interactive 3D with Three.js BatchedMesh and WebGPURenderer

SVG Overlay and Infinite Menu Background Animation

Blurry Text Reveal on Scroll

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.

  1. Hi, thank you for the tutorial!

    Unfortunately I have a problem, in my main page I embedded a twitter widget but when your plugin made a transition the widget disappear.

    Do you know how can I fix that problem?

  2. Hey everyone! I am having trouble with the complete files when I upload it. I am making a wedding website for my fiancé and I and am using the Slit Slider as a template. When I upload it, everyone gets pushed to the left. I even tried just uploading the source files/folder to see if it was something I did. Neither worked. If anyone can check it out and left me know what is wrong that would be amazing. Please I need help desperately. The url is http://www.samandnick.com Thank you all!

  3. good slider. but there is one issue. if slider on autoplay and if i load slitslider in one browser tab and then i went on some another tab. and i come back to the slitslider tab then function stop automaticly. if i try to oprate mannuly then also it’s not happen anything.

    enyone can help me on this issue.

    Thanks…!

  4. It seems that on the ipad the transitions “break”. (horizontal) but when vertical the transitions are fine. Does anybody else see this?
    Also, is this new version IE compatible by any chance?
    Sweet Slider – just wondering on above.
    Thanks.

  5. I cant find an example on how to call the jump method
    $("#thirdElement").on("click", function(){ $.stilslider.jump(3); })
    Whit this code i get the “Cannot call method Jump of undefined” error
    $("#logos").on("click", function(){ $( '#slider' ).jump(3); })
    with this second code
    i get the “Object [object Object] has no method jump”

    🙁 any help?

  6. ok I find a way, I don’t know if its the correct one

    slitslider = $( '#slider' ).slitslider(); $("#btnParticipa").on("click", function(){ slitslider.jump(3); })

  7. I need some help. This slideshow stops working (autoplay) when i go to another tab and then go back after more than 10 seconds. Maybe you haven’t noticed this or maybe it happens only to me.
    Does anyone have an idea how to solve this?

    Many thanks in advance.

  8. Is there a fix for Android on this at all?

    Very nice slider and would like to use it, but on Android, 1st to 2nd transition works, then gets stuck on slide 2 and none of the nav will work from then on. Looks beautiful on IOS and it does for the 1 slide on Android, just need to sort the sticking!

    Tried various jq versions in case and a fresh modernzer.

    Any help appreciated.

    Many Thanks.