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.

Slit Slider Revised

From our sponsor: Learn from healthcare leaders in Northwestern’s Online MS in Healthcare Administration.

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.

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.