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 Mary Lou in News & Updates on October 24, 2012

View demo Download Source

From our sponsor: Elevate all your marketing with Mailchimp Smarts.

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:

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: animation CSS3 jQuery slider slideshow

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback ⁷⁵

Comments are closed.

Nana October 24, 2012 at 20:02

Amazinggggggg !!!!!!!!!!! 😀
Giu T K October 24, 2012 at 21:43

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?
ozgur coruhlu October 24, 2012 at 21:46

Awesome job guys!
galeazzo October 24, 2012 at 23:14

does’nt work with FF
- Mary Lou October 25, 2012 at 10:21
  
  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
- Sara October 25, 2012 at 10:21
  
  I’m using Firefox and it works great.
  Thank you Mary Lou! Awesome Job! 🙂
John October 25, 2012 at 11:03

Best image slider I’ve seen in a while. Great job. Keep them coming! 🙂
Nelos October 25, 2012 at 11:44

Once again amazing!

<3 <3 <3

Ty
Marcus Graf October 25, 2012 at 12:19

I like it! Does it work with fullscreen videos?
mak October 25, 2012 at 14:29

Awesome,.. amazing, …. but it is sad to say…

!! always the same problem with shitty browser
- Richard Fitzjohn October 26, 2012 at 00:09
  
  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.
Thomas Skerbis October 26, 2012 at 10:36

Is it possible zu autoplay the slides? This would be great.
Orhan P. October 26, 2012 at 16:55

Cool, also you are :]
Sly October 27, 2012 at 00:05

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
- awms October 28, 2012 at 12:40
  
  try using the latest version of jQuery, I think I’ll fix the issue 😉
chekomac October 27, 2012 at 00:08

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 🙂
- awms October 28, 2012 at 12:43
  
  check your jQuery version and make sure its the latest..
awms October 28, 2012 at 12:32

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!
- awms October 28, 2012 at 12:42
  
  worked is chrome now but not in opera yet.
Inspiration October 28, 2012 at 22:31

Awesome!!! again a great work
Thomas Skerbis October 29, 2012 at 11:20

Hi. I found the Autoplay – Funktion. Is it possible to pause the slideshow on mouse over? Can someone help me please?
chekomac October 29, 2012 at 16:48

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 :/
Mihan October 29, 2012 at 21:55

Nice job!!! You have the best slideshow I’ve seen this is amazing!!!
Sebastian October 31, 2012 at 15:54

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!
Dave November 1, 2012 at 21:33

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!
Sebastian November 14, 2012 at 10:02

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?
- Sotiris December 12, 2012 at 20:35
  
  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();

Demos

Summary of Changes

Subscribe to Codrops

CSS Reference

Feedback 75

Feedback ⁷⁵