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: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

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.

Feedback 75

Comments are closed.

  1. 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(); } });

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

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

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

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

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

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

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

  10. Hallo,

    is it possible to use an menu with links like this

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

    Thanks Marc

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

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

  13. 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…!

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

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

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

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

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

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