Создание адаптивного jquery.anythinglider

Question

Я использую anythingslider и испытываю серьезные проблемы, пытаясь сделать его совместимым с мобильным отзывчивым представлением.

В основном, что я делаю, когда размер окна изменяется, я изменяю эти переменные:

var lists = jQuery('.page-home .featured-rotator ul li');
var slider = jQuery('div.anythingSlider');
var shadow = jQuery('div.region-home-featured')

чтобы соответствовать этой переменной, которая обновляется при изменении размера:

var slider_width = jQuery('.home-featured').width();

Некоторые вещи выглядят лучше с точки зрения всего контейнера вида, но слайды все еще переходят на свою первоначальную ширину, в результате чего несколько слайдов отображаются в одном виде.

Кто-нибудь еще пытался изменить ширину? Я прочитал в другом ответе о том, как вы можете установить переменную, которая делает ее отзывчивой в одной строке кода, но мне не повезло, пытаясь реализовать это. Я делаю это неправильно или это не относится к этому слайдеру?

Answer 1

Регулировка размера

Например, если вы хотите сделать слайды шириной 580 пикселей вместо 680 пикселей, вам просто нужно изменить CSS. Измените ширину.anythingSlider ul li на 580px, измените ширину.anythingSlider.wrapper на 580px и уменьшите ширину.anythingSlider 100px до 660px.

http://css-tricks.com/anythingslider-jquery-plugin/

Вам нужно изменить размер не только оболочки, но и элементов li. т.е. в вашем случае .featured-rotator ul li