From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
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.
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