I am using the anythingslider and having major problems trying to make it compatabile with a mobile responsive view.
Basically what I am doing is when the window resizes I change these variables:
var lists = jQuery('.page-home .featured-rotator ul li');
var slider = jQuery('div.anythingSlider');
var shadow = jQuery('div.region-home-featured')
to match this variable which is updated on resize:
var slider_width = jQuery('.home-featured').width();
Some things are looking better in terms of the whole view container, but the slides are still transitioning at their original width, making multiple slides appear in one view.
Anyone else tried to alter the width? I read in another answer about how you can set a variable which makes it responsive in one line of code but I had no luck trying to implement that. Am I doing it wrong or does it not apply to this slider?
Adjusting Size
For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. Change the width of .anythingSlider ul li to 580px, change the width of .anythingSlider .wrapper to 580px, and reduce the width of .anythingSlider 100px to 660px.
http://css-tricks.com/anythingslider-jquery-plugin/
Not only do you need to resize the wrapper but also the li elements. i.e., in your case the .featured-rotator ul li