jquerysliderzurb-foundationbxslider

BX Slider doesn't show when opened in Foundation reveal?

Basically, I have a BX Slider that will show up on a pop-up via Zurb Foundation's reveal. However, when I click on a button to show the modal (with the bx slider inside it), it doesn't show up. The weird thing is, when I resize the window, the carousel suddenly appears.

Modal Trigger Button:

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

Modal 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 code:

$(document).ready(function(){

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

});

Here's a simulation of the problem:

Think it has something to do with the modal being hidden initially.

https://jsfiddle.net/5s6nowaq/

Solution

  • The Bx-slider needs to be instantiated,after the modal dialog is shown.

    Currently your instantiating bx-slider on document.ready(), but since modal dialog is hidden, it is getting destroyed. so when the modal dialog is shown again, bx-slider does not come up on screen.

    JS code:

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

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

    CSS code:

    .modal1 {
   display: none;
 }

    Working Demo @ JSFiddle

    There are couple of other changes which I have done in your code Note: