Нужен условный jquery для адаптивного сайта

Новый, но активный пользователь jquery здесь, пожалуйста, будьте нежны :)

Я использую фантастическую caroufredsel (отзывчивую карусель jquery) и настроил ее изначально, поэтому я доволен функционал прокрутки.

Он отображает список гитар. В настоящее время их всего 3, но я хочу добавить больше в будущем.

Я создаю адаптивный сайт, и на меньших размерах экрана одновременно видны только 2, а то и 1 гитара. Проблема в том, что вы начинаете с полноэкранного браузера, когда вы изменяете размер на меньший экран, jquery не перезапускается, чтобы принять это во внимание. Поэтому вам нужно обновить экран до меньшего размера, чтобы появились элементы управления ползунком.

Точно так же, если вы начинаете с маленького экрана, при его увеличении элементы управления остаются на экране, даже если они функционально бесполезны, поскольку отображаются все элементы.

Поэтому я хочу, чтобы элементы управления были видны только в случае необходимости (т. е. не в том случае, если все содержимое карусели видно сразу), и чтобы они настраивались в соответствии с текущим размером экрана без обновления.

Я считаю, что это возможно, уничтожив карусель и повторно запустив ее при изменении размера экрана, но я просто не могу заставить ее работать.

Сайт находится в сети по этому адресу: http://www.wirebirdguitars.com/staging/guitars.html

Любая помощь/предложение будет оценена по достоинству. Спасибо!!


jquery conditional
person Jonathan Garner    schedule 21.06.2012    source источник
comment
Симпатичный сайт :-) Между прочим, это "отзывы".   -  person Jasper Mogg    schedule 21.06.2012
comment
На самом деле, когда вы загружаете банкомат своего сайта, карусель не запускается. Вам нужно иметь исходный код, а также код, который я указал в своем ответе. Таким образом, он запустится при первой загрузке страницы, а также перезапустится при изменении размера окна.   -  person Jasper Mogg    schedule 21.06.2012
comment
Привет, Джаспер. Прежде всего, большое спасибо за быстрый ответ! Я начал использовать ваш ответ, но удостоверился, что понял его правильно, прежде чем ответить. Теперь он работает очень хорошо! Кажется, что прокрутка все еще немного неустойчива - иногда прокручивается более одного элемента после изменения размера экрана, но это происходит. Спасибо за добрые комментарии к сайту - я только начинаю работать веб-дизайнером, и это сложно, но весело :-) Еще раз спасибо   -  person Jonathan Garner    schedule 21.06.2012
comment
Что ж, надеюсь, вы устраните эти перегибы - для новичка этот сайт выглядит потрясающе. Не то, чтобы я был кем-то кроме новичка!   -  person Jasper Mogg    schedule 21.06.2012
comment
Привет, Джаспер. Я задал еще один вопрос, чтобы помочь мне отполировать его. В очередной раз благодарим за помощь. stackoverflow.com/questions/11145041/   -  person Jonathan Garner    schedule 21.06.2012

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте это в свой JS.

function doSomething() {

    $('#guitars-gallery').trigger('destroy');

    $("#guitars-gallery").carouFredSel({
    auto: false,
    circular: false,
    prev: '#prev',
    next: '#next',
    responsive : true,
    height : 'auto',
    items : { width : 400, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Вдохновленный этим вопросом.

person Jasper Mogg    schedule 21.06.2012
comment
С добавлением этого кода у вас получился чертовски сексуальный адаптивный сайт, мистер @JOnathan Garner :-) - person Jasper Mogg; 21.06.2012