Hello,

 

I am using Flexslider, and am trying to load a different set of images for desktop and mobile (blame the designer!!). It almost works, however when navigating between slides (after resizing your browser window), the slides just seem to go off to the far left never to be seen again.

 

I have created a test page here.

 

When you go to the page you should see the desktop banner (with 2 navigation buttons in bottom left of browser window. If you now resize your browser to below around 600px, you should see the aspect of the images change to a more square version. This is when the mobile images are loaded in place of the desktop ones. However if you now try and navigate using the bottom left buttons, the images just swipe off to the left and it breaks the slider!

 

Has anyone run into this issue before or know how to solve it?

 

All I want to do is swap out the images for a different set of images when the browser window drops below a certain size. Should be fairly simple?

 

Thanks for any help

James

If you have to switch out images I would say not to use Flexslider. Otherwise you'll need to go into the plugin code and modify it accordingly which is probably more work than you had intended.

The slider was a size of 800% of the screen width.

style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-2666px, 0, 0);"

 

You probably need to change the with and the translate3d size for each element on a smaller screen

 

Cheers :B