Unbind/remove Jquery function in responsive

I am currently developing a responsive site and would like to use this responsive slider - http://responsiveslides.com/ but only when the viewport is less 640px wide.
I have a window size check that works and if you start in desktop view it doesn't initiate the slider function using
$(function() {

Open in new window

But when I resize from mobile to desktop the slider function is still used.

Is there a way to unbind/cancel the rslides function when resizing to a desktop view?

Who is Participating?
Alexandre SimõesConnect With a Mentor Manager / Technology SpecialistCommented:
Ah, but that is a different thing :)

I had a quick look at the code ResponsiveSlides code and I couldn't see any "destroy" method. This means that it won't be easy for you to "unplug" the functionality from your <ul>.

If the html is not that much I think a good option is to just duplicate it.
Have 2 separate <ul> lists, one for the slider and another for the desktop and show the appropriate depending on the size.
This way you isolate the behaviors and are sure that CSS changes on the desktop won't affect the mobile slider.
Alexandre SimõesManager / Technology SpecialistCommented:
Wouldn't it be enough if you just pause the sliding feature and start it again if the user moves back to a lower size?

I mean, you can play with ti but in real life I don't think the website will have many different sizes, specially if it started on a mobile device. On a phone or on a tablet you can't just resize the window so this will never be an issue.

On the desktop, if for some reason the user was on a lower size, went to a bigger one and you just want to hide that slider, just hide it and pause the functionality using the "pause" option you can see on the documentation.
If the user comes back to a lower size, show it and resume.
Al4ddin2Author Commented:
Want I would like is for it to behave differently on a desktop window than a mobile.
ie. I only want a carousel on the mobile view, then on desktop I want them to be thumbnail display inline so pausing it would only show the one image and not all of them no?
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

The correct way would be to use separate pages.  Overdoing the whole "responsive" page thing just creates maintenance issues that will waste more of your effort over time then it takes to create a new second page.

If you feel you would rather create a monster, then you can probably hack it using AJAX to bringing alternate pieces and then just butcher what is there and fill in the holes with new content; and hope the next version of one of the devices you are supporting does not get crashed by the hack.

GaryConnect With a Mentor Commented:
Just hide/show the container with your media queries - forget about trying to bind/unbind/rebind every time someone resizes their browser.

@media only screen and (min-width : 640px)  {
 #slideshow-container {display:none}
Alexandre SimõesManager / Technology SpecialistCommented:
Yeah, hiding is the best but pausing the plug-in will also avoid background work.
Would hardly make any difference and how many stay on the home page for very long.
Al4ddin2Author Commented:
Thanks for all your input.
I think i'll go for the hiding option, also as its not using the auto scrolling there shouldn't be any background working happening so it sounds like the best approach.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.