Question

I’m working with this jquery/css3 slider and would like to make it responsive.

<http://jsfiddle.net/mj13/dQTS4/2/>

The problem with this slider is that it uses slices/masks to display the image. On page load, the script ‘gets’ the image size and creates slices/masks based on that image.

I have managed to make the slider slices scale as the browser is resized (width:33%).
However, the problem comes when I resize the image, as the ‘slices’ that are scaled are those of the image originally grabbed at 100%.

I have already tried to create media queries to display different images at different screen sizes. Unfortunately, the script creates those image slices based on the screen size on page load!

Is there some way I can reload the jquery script or the part of it that creates the image slices when the page is resized? I am willing to consider other options.

Thanks in advance!

Answer 1

Try to write your code in window.resize function like:

$(window).resize(function() {
  // add the stuff here to execute the your slider again;
});