Проблема с плагином bxSlider jQuery

Я работаю над веб-сайтом и внедрил в него bxSlider. У меня есть страница, на которой много изображений (имя их класса .item). Когда вы нажимаете на одно из изображений, появляется оверлейное окно и отображается контент (с несколькими абзацами), а после этого идет слайд-шоу.

Проблема в том, что я вызываю bxSlider сразу после document.ready, и, поскольку окно моего оверлея скрыто (display:none), bxSlider не загружается должным образом.

И поэтому я решил поместить $('.bxSlider').bxSlider(); внутрь $('.item').click();, и это работает хорошо.

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

Я пытался вызвать $('.bxSlider').destroySlide(); под .close (div, который закрывает окно оверлея), но это не работает.

JQuery:

$(function(){
     //show bxslider
    $('a.show').click(function(){
        $('ul.bxslider').fadeIn();
         var slider = $('.bxslider').bxSlider();
        return false;
    });

    //hide bxslider
    $('a.hide').click(function(){
        $('ul.bxslider').fadeOut();
        return false;
    });
});

HTML:

<a href class="show">Show Slider</a>
<a href class="hide">Hide Slider</a>
<br /><br />
<ul class="bxslider">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

JSFiddle ссылка

Кто-нибудь может мне помочь? Вот параметры плагина:


javascript html jquery slideshow bxslider
person user3121234    schedule 26.12.2013    source источник
comment
можем ли мы иметь игровую площадку, такую ​​​​как jsfiddle.net или jsbin.com? также, пожалуйста, обновите вопрос, указав HTML-разметку, css, js-код того, что вы пробовали до сих пор.   -  person Ravimallya    schedule 26.12.2013
comment
Привет, конечно. Я собирался обновить свой пост. jsfiddle.net/GnBTm/3   -  person user3121234    schedule 26.12.2013
comment
Не могли бы вы опубликовать полный код? я имею в виду код, который вы используете для Но когда я закрываю окно наложения, а затем снова открываю его, щелкнув элемент .item, он попытается снова вызвать функцию bxSlider, что вызовет проблемы. Я попытался вызвать $('.bxSlider').destroySlide(); под .close (div, который закрывает окно наложения), но это не работает.   -  person Ravimallya    schedule 26.12.2013

Ответы (2)


arrow_upward
0
arrow_downward

Я не знаю, правильно ли я понял ваш вопрос, но этот ответ работает для вашей проблемы?

Я обновил следующую часть вашего кода:

//hide bxslider
$('a.hide').click(function(){
    $('ul.bxslider').fadeOut();
   var slider = $('.bxslider').bxSlider();
    slider.destroySlider();
});

http://jsfiddle.net/GnBTm/5/

ОБНОВЛЕНИЕ

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

$(function(){
     //show bxslider
    $('a.show').click(function(){
        $('ul.bxslider').fadeIn();
         var slider = $('.bxslider').bxSlider();
        return false;
    });

    //hide bxslider
    $('a.hide').click(function(){
        $('ul.bxslider').fadeOut();
        var slider = $('.bxslider').bxSlider();
        slider.destroySlider();
    });
});

С уважением, Родриго

person BetaSystems - Rodrigo Duarte    schedule 26.12.2013
comment
Я копирую и вставляю ваш код, посмотрите, что происходит, когда я пытаюсь щелкнуть триггер создания ползунка: i.imgur .com/Y2e7Ye0.jpg и хотя это копирование и вставка, кажется, что когда я нажимаю кнопку закрытия, bxSlider не уничтожается. Я так расстроен. - person user3121234; 26.12.2013

arrow_upward
0
arrow_downward

Проблема с вашим кодом заключалась в том, что вы не сохраняли дескриптор bxslider. и вторая проблема заключалась в том, что вы вызывали destroySlide, а не destroySlider.

http://jsfiddle.net/4Nt7w/

Посмотрите на решение в скрипке.

 var slider = "";
 //show bxslider
$("#show").on('click',function(){
    $('ul.bxslider').fadeIn();
     slider = $('.bxslider').bxSlider();
    return false;
});

//hide bxslider
$('#hide').on('click',function(){
    $('ul.bxslider').fadeOut();
    slider.destroySlider();
});

HTML-код

 <input type="button" id="show" class="show" value="Show Slider" />
 <input type="button" id="hide" class="hide" value="Hide Slider" />
 <br /><br />
 <ul class="bxslider">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>
person VJS    schedule 28.12.2013