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