First image slideshow not loading

Hi,

I have a slideshow in a modal the first picture is not loading. Only when you click next the slides are working fine or when you click on the thumbnail image above.

When I load the slideshow outside the modal it's working fine. Any idea what could cause the problem and how I can fix it?

Link to the page: http://leshiba.co.za/beta/?accommodation=luxury-suites

Code I use:

<!-- This is the modal -->
    <div id="gallery" class="uk-modal">
      <div class="uk-margin-large-top uk-margin-large-bottom uk-width-9-10 uk-modal-dialog-lightbox">
        <div class="uk-slidenav-position" data-uk-slideshow>
          <div class="uk-margin-bottom" data-uk-slideset="{default: 5}">
            <div class="uk-slidenav-position">
              <ul class="uk-slideset uk-grid uk-flex-center uk-grid-width-1-4">
                <li data-uk-slideshow-item="0">
                  <img src="http://getuikit.com/v2/docs/images/placeholder_800x400_1.jpg"> </li>
                <li data-uk-slideshow-item="1">
                  <img src="http://getuikit.com/v2/docs/images/placeholder_800x400_2.jpg">
                </li>
                <li data-uk-slideshow-item="2">
                  <img src="http://getuikit.com/v2/docs/images/placeholder_800x400_3.jpg">
                </li>
                <li data-uk-slideshow-item="3"><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_1.jpg"> </li>
                <li data-uk-slideshow-item="4">
                  <img src="http://getuikit.com/v2/docs/images/placeholder_800x400_2.jpg">
                </li>
                <li data-uk-slideshow-item="5">
                  <img src="http://getuikit.com/v2/docs/images/placeholder_800x400_3.jpg">
                </li>
              </ul>
              <a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
              <a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
            </div>
          </div>
          <ul class="uk-slideshow uk-height-viewport">
            <li><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_1.jpg"></li>
            <li><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_2.jpg"></li>
            <li><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_3.jpg"></li>
            <li><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_1.jpg"></li>
            <li><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_2.jpg"></li>
            <li><img src="http://getuikit.com/v2/docs/images/placeholder_800x400_3.jpg"></li>
          </ul>
          <ul>
            <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
            <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
          </ul>
        </div>
      </div>
    </div>

Hey Bas,

I see a few potential issues. First you have 2 gallery ids on the page, one on the button and one on the slideshow wrapper div. Then your slideshow HTML look a bit weird, you have two navigation etc.

I would process by elemination here. First get a simple slideshow working on the page, when that works, add it to a modal, when that works, add any other layer of complexity you have etc. etc. etc.

Hope that helps,

Hi Thierry, Thanks for the feedback. The id on the button is target:'#gallerymodal' to trigger the modal. I have tested just the slideshow in the modal and that gives the same issue.

The idea is that the thumbnails are showing above the slideshow, that's why there are two nav's.

Strange thing is that the slideshow works in the page itself: http://localhost:8888/leshiba-2015/?accommodation=luxury-suites (scroll down)

I see, that makes complete sense. It seems to be an height issue, the height is set to 0px on load. I can't think of what could be causing the issue just by inspecting the code in the browser, I would advise to post on the UIkit community as some other users might have experience the same issue.

Thanks,

Thanks Thierry, Will post it there.

Bas