CODEWITHSUNDEEP
jqueryhtmltwentytwenty
Eduard
Eduard

Reputation: 11

TwentyTwenty JQuery plugin not showing all images. When resizing window all images are shown

I'm trying to build my first website with before / after slider images. I'm using the TwentyTwenty jQuery plugin. When accessing the website, not all images are showing - when I reload or resize the window all are showing.

My website: http://www.nygreenstreets.com

TwentyTwenty plugin: https://zurb.com/playground/twentytwenty

TwentyTwenty plugin on GitHub: https://github.com/zurb/twentytwenty

For the images that are not showing I'm seeing a height of 0px.

<div class="twentytwenty-container" style="height: 0px;">

Slider images correctly showing / Slider images not showing / Only after resizing the window or reloading the page are all slider images showing.

The image sliders are in the following container:

<div class="twentytwenty-container">
<img src="index_files/images/160 W 43rd St 1.jpg" />
<img src="index_files/images/160 W 43rd St 2.jpg" /></div>

Script:

<script>
    $(function(){
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.5});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.5, orientation: 'vertical'});
    });
    </script>

Upvotes: 1

Views: 986

Answers (0)

Related Questions