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.
From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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:
- Demo 1: Fullscreen with different background colors, dot navigation and arrow navigation
- Demo 2: Full width with background images
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.
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!
has anyone a solution for a swipe function jet? would be great!
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();
}
});
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
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
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
did you find a way to get this to work in Android?
How to add automatic play?
inside the jquery.slitslider.js . update code as per below
// slideshow on / off
autoplay : true,
Tengo una pregunta, ¿como hago para que el slideshow no vuelva y comience? detener el loop… ¿¡Stop loop!?
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!
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
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!
Hallo,
is it possible to use an menu with links like this
<a href="#ID-SLIDE-2">Show Slide 2</a>Thanks Marc
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?
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!
Hi Nick,
We can help you regarding your issue. If you are interested please let me at lswcoder@gmail.com.
Thanks.
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…!
Same thing happened to me. I tried to find a solution but nothing seems working..
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.
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?
ok I find a way, I don’t know if its the correct one
slitslider = $( '#slider' ).slitslider();
$("#btnParticipa").on("click", function(){
slitslider.jump(3);
})
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.
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.
how to add pause function on text hover/icon hover