BX Slider не отображается при открытии в Foundation?

Question

В принципе, у меня есть ползунок BX, который появится на всплывающем открытии через открытие Zurb Foundation. Однако, когда я нажимаю кнопку, чтобы показать модальный (с помощью ползунка bx внутри), он не появляется. Странно, когда я изменяю размер окна, неожиданно появляется карусель.

Модального Trigger Button:

<a class="button" data-open="modal-product-detail">Show Modal</a> 

Модальных HTML:

<div class="reveal" id="modal-product-detail" data-reveal> 

       <ul class="bxslider"> 
       <li class=""> 

        <img src="images/img_product_popup_detail.jpg"> 

       </li> 
       <li class=""> 

        <img src="images/img_product_popup_detail.jpg"> 

       </li> 
       <li class=""> 

        <img src="images/img_product_popup_detail.jpg"> 

       </li> 
       </ul> 

       <button class="reveal-close" data-close aria-label="Close modal" type="button"> 
       </button> 

JS код:

$(document).ready(function(){ 

    $('.bxslider').bxSlider({ 
    auto: false, 
    controls: true, 
    pager: false 
    }); 

}); 

Вот моделирование пробло em:

Думайте, что это как-то связано с тем, что модальное лицо было скрыто изначально.

https://jsfiddle.net/5s6nowaq/

Answer 1

В Bx-slider потребности быть обработан, после того, как модальное диалоговое окно отображается.

В настоящее время ваш экземпляр bx-slider на document.ready(), но поскольку модальный диалог скрыт, он становится разрушенным. поэтому, когда модальный диалог отображается снова, bx-slider не появляется на экране.

JS КОД:

$(document).ready(function() { 
    //$(".modal1").hide(); 

    $(".sampleclick").on('click', function() { 
    $(".modal1").show(); 
    $('.bxslider').bxSlider({ 
     auto: true, 
     controls: false, 
     pager: false 
    }); 
    }); 
    }); 

CSS КОД:

.modal1 { 
    display: none; 
} 

Working Demo @ JSFiddle

Есть несколько других изменений, которые я сделал в коде Примечание:

• Всегда помещайте весь код, связанный Jquery внутри document.ready(), так что вы не получите каких-либо сюрпризов, прежде чем ваша страница полностью загружена на экране.
• При скрытии элементов/изображений на странице во время начальной загрузки лучше сделать это с помощью css, чем с помощью кода js/jquery, так как вы увидите, что изображения появляются, а затем исчезают на экране.

Answer 2

Думаю, что это что-то делать с модальным прячась изначально.

Вы верны. Сроки во время загрузки критически важны, и это зависит от bxSlider, поскольку он делает расчеты до того, как DOM уже готов (наблюдение, не знаю точно, но это объясняет, почему bxSlider может иногда иметь частичную высоту).Хотя bxSlider кажется, который должен быть уничтожен, будучи экземпляром в модальный, который еще существует, он есть, но его вычисления основаны на его текущем содержимом, которое во время DOMReady равно null ... undefined ... 0? Что бы это ни было в то время, мы все можем согласиться, что это не то, что мы ожидаем.

Использование только API bxSlider и JavaScript/JQuery есть 3 возможных способа мы можем решить эту проблему:

1. Там является плохо документированы метод называется .redrawSlider(). Этот метод имеет конкретный прецедент, когда bxSlider скрыт, метод redrawSlider() будет перерисовываться после того, как bxSlider не будет скрыт. Этот метод изменит размер окна просмотра, который инициирует оплату (это все, что нам нужно большую часть времени), но из этого пересчета вычисляется высота и игнорируется ширина. Это нормально, пока контент не является блочным элементом. Возможно, этот метод будет работать в версии 5 или лучше, но исправлена ​​ошибка с высотой.
2. Вызывает переплавку, заставляя bxSlider пересчитывать окно просмотра. В этом случае необходимо учитывать переплавку, так как bxSlider не пересчитывает все при каждом переплаве. Обычно изменяется высота .bx-viewport и/или .bx-wrapper. Если нет, мы можем использовать обратный вызов onSliderResize.
3. Мы можем повторно создать экземпляр bxSlider, как предлагал @dreamweiver, когда bxSlider появляется от display:none до display:{ANYTHING OTHER THAN NONE}. API bxSlider имеет метод .reloadSlider(), который, как вы догадались, перезагружает bxSlider.

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

SNIPPET

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> 
 
    <title>00A00</title> 
 
    <link href='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'> 
 
    <style> 
 
    html, 
 
    body { 
 
     height: 100%; 
 
     width: 100%; 
 
     background: #111; 
 
     color: #eee; 
 
     font: 400 16px/1.428 Verdana; 
 
    } 
 
    main { 
 
     padding: 4em; 
 
    } 
 
    .bx-wrapper { 
 
     background: none; 
 
    } 
 
    img { 
 
     margin: 0 auto; 
 
     display: block; 
 
    } 
 
    section.off { 
 
     display: none; 
 
    } 
 
    section.on { 
 
     display: block; 
 
    } 
 
    button { 
 
     display: inline-block; 
 
     border-radius: 4px; 
 
     border: 1px solid cyan; 
 
     line-height: 1.2; 
 
     font-size: 1.25rem; 
 
    } 
 
    button.off { 
 
     color: cyan; 
 
     background: none; 
 
    } 
 
    button.off::before { 
 
     content: 'Reveal '; 
 
    } 
 
    button.on { 
 
     color: black; 
 
     background: cyan; 
 
    } 
 
    button.on::before { 
 
     content: 'Conceal '; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <main> 
 
    <button id="btn1" class="off">BX</button> 
 

 
    <section id='sec1' class="off"> 
 

 
     <ul class="bxslider"> 
 
     <li class='slide'> 
 
      <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'> 
 
     </li> 
 
     <li class='slide'> 
 
      <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'> 
 
     </li> 
 
     <li class='slide'> 
 
      <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'> 
 
     </li> 
 
     <li class='slide'> 
 
      <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'> 
 
     </li> 
 
     <li class='slide'> 
 
      <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'> 
 
     </li> 
 
     </ul> 
 

 
    </section> 
 
    </main> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <script src='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script> 
 
    <script> 
 
    $(function() { 
 
     var bx = $('.bxslider').bxSlider({ 
 
     pager: false 
 
     }); 
 

 
     /* This part is optional... 
 
     |...If you want to change your... 
 
     |...options during reload... 
 
     | 
 
     */ // 1. Create an object literal 
 
     /*ex: var cfg = {pager:false}; 
 
     */ 
 
     //// 2. Pass this object: 
 
     /*ex: bx.reloadSlider(cfg) 
 
     */ 
 
     // Follow the directions with 
 

 
     /* Add a '/' to the beginning of this line 
 
     var cfg = { 
 
     mode: 'vertical', 
 
     maxSlides: 2, 
 
     minSlides: 2, 
 
     shrinkItems: true, 
 
     pager:false 
 
     }; 
 
     //*/ 
 

 
     $('#btn1').on('click', function() { 
 
     $(this).toggleClass('on off'); 
 
     $('#sec1').toggleClass('on off'); 
 
     /* Add a '/' at strat of line 
 
     bx.reloadSlider(cfg); 
 
     //*/ 
 
     //* Remove the first '/' of line 
 
     bx.reloadSlider(); 
 
     //*/ 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

В качестве бонуса, я добавил демонстрацию того, как использовать метод .reloadSlider() изменить параметры на лету.