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: Create your beautiful portfolio website with Squarespace. Start your free trial.
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.
Amazinggggggg !!!!!!!!!!! 😀
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?
Awesome job guys!
does’nt work with FF
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
I’m using Firefox and it works great.
Thank you Mary Lou! Awesome Job! 🙂
Best image slider I’ve seen in a while. Great job. Keep them coming! 🙂
Once again amazing!
<3 <3 <3
Ty
I like it! Does it work with fullscreen videos?
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.
Is it possible zu autoplay the slides? This would be great.
Cool, also you are :]
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
try using the latest version of jQuery, I think I’ll fix the issue 😉
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 🙂
check your jQuery version and make sure its the latest..
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!
worked is chrome now but not in opera yet.
Awesome!!! again a great work
Hi. I found the Autoplay – Funktion. Is it possible to pause the slideshow on mouse over? Can someone help me please?
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 :/
Nice job!!! You have the best slideshow I’ve seen this is amazing!!!
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!
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!
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();