Как заставить чтобы параметр обновлялся?
 

Как заставить чтобы параметр slideWidth обновлялся при изменении размеров окна браузера в карусельном слайдере http://bxslider.com/?

Сделал как указанно на http://bxslider.com/examples/reload-slider-settings там пример перезагрузки всего слайдера, слайдер вроде как перегружается но параметр slideWidth не обновляется.

Еще пояснение параметр slideWidth должен указыватся в пикселах, я поставил вычисление размера по размеру самого элемента, чтобы можно было сделать этот параметр более гибким, вот так сделал: slideWidth: $( '#front-portfolio .front-item' ).width(),

сам код активации карусельного слайдера:

var slider = $( '#front-portfolio' ).bxSlider({
wrapperClass: 'bx-wrapper-portfolio',
slideWidth: $( '#front-portfolio .front-item' ).width(),
minSlides: 1,
maxSlides: 4,
slideMargin: 0,
infiniteLoop: false,
hideControlOnEnd: true,
adaptiveHeight: true,
pager: true
});
$( window ).on( 'resize', function() {
console.log( 'slider' );
slider.reloadSlider();
});

Подскажите как заставить обновлятся парамерт slideWidth при изменении размеров окна.

Alexsher,
так укажите параметры в reloadSlider

Пробовал не срабатывает :)

Alexsher,
покажите что вы пробовали

var slider = $( '#front-portfolio' ).bxSlider({
wrapperClass: 'bx-wrapper-portfolio',
slideWidth: $( '#front-portfolio .front-item' ).width(),
minSlides: 1,
maxSlides: 4,
slideMargin: 0,
infiniteLoop: false,
hideControlOnEnd: true,
adaptiveHeight: true,
pager: true
});
$( window ).on( 'resize', function() {
console.log( 'slider' );
slider.reloadSlider({
wrapperClass: 'bx-wrapper-portfolio',
slideWidth: $( '#front-portfolio .front-item' ).width(),
minSlides: 1,
maxSlides: 4,
slideMargin: 0,
infiniteLoop: false,
hideControlOnEnd: true,
adaptiveHeight: true,
pager: true
});
});

Alexsher,
ok макет бы конечно -- может ширина того что меряите неизменяется ?

для примера -- перемещайте разделитель в песочнице
http://learn.javascript.ru/play/tRWMr

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

Alexsher,
непонял ничего -- всё что понял в примере выше

да если поставить в логе
console.log( $( '#front-portfolio .front-item' ).width() );

то по логу получается что размер не меняется... как сделать обновление контейнера "#front-portfolio" ?


я имел ввиду если сделать перезагрузку целиком страницы тогда размер меняется и соответственно слайдер тоже обновляется

$( window ).on( 'resize', function( event ) {
this.location.reload( true );
});

Alexsher,
в примере всё меняется без перезагрузки -- зачем она нужна только вам известно - так меряйте то что изменяется -- продолжаю не понимать в чём ваша проблема

В вашем примере контейнер с картинкой имеет размер 100% и сам карусельный вариант показывает одну картинку, в этом варианте вообще можно не заморачиватся с указанием размера слайда, в моем примере кода показывается 4 картинки максимально и 1 при уменьшении размеров (адаптивный дизайн) и соответственно размер контейнера с картинкой (<li>) имеет размер 25% это первое, второе при изменении размеров браузера (адаптивный дизайн) изменяется количество показываемых картинок (3 картинки и уже 33%) понимаете? Но в этом слайдере установка размеров идет в пикселях поэтому я и поставил код вычисления размера

http://bxslider.com/examples/carouse...-number-slides каруселька с указанием максимального и минимального количества показываемых слайдов

Alexsher,
так вы решили свою проблему?

Нет

Alexsher,
а макет сделать или картинку чего есть а чего хочется а то я до сих пор непонимаю чего выхотите добится и что неполучается, если конечно не в тягость?

Попытаюсь еще раз объяснить суть проблемы, в css медиа выставляем к примеру при размере окна больше 960 размер контейнера слайдов 25% меньше 960 - 33%, под мобильники и так понятно 100%

И так как в параметрах карусели нужно выставлять размеры в пикселях (а у нас в процентах) ставим код вычисления размеров,

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

Ок попробую сделать макет

Alexsher,
пока делаите вот вам ещё вариант адаптивного слайдера )))
http://learn.javascript.ru/play/xSyqb

http://learn.javascript.ru/play/yHnj4b

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

Alexsher, а такой вариант устроит?
http://learn.javascript.ru/play/v16lqb

да посмотрел в принципе это тот вариант что нужен, только не могу понять как теперь прикрутить :) я использую эту карусельку на одной странице в нескольких вариантах, в одном варианте 5 слайдов, в другом 4 есть и в 3 (максимально показанные)

поставил, теперь вместо 4-х показывает 3, при изменении впринципе работает то нормально... теперь бы разобратся с показом количества слайдов :)

var h = $(window).width()/get_num()-10;

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

var h = $('.grid-container').width()/get_num()-10;

Спасибо за помощь, разобрался с вашим вариантом, подобрал размер, вобщем все работает.

Топик закрыт.