CODEWITHSUNDEEP
javascriptjqueryajaxglidejs
user3398797
user3398797

Reputation: 429

Image height issue after loading carousel from external file (GlideJS)

I am using GlideJS to display a carousel with images. I load this carousel in file A (carousel-test.php) by calling the following code:

<div id="carouselContainer"></div>
<script>
$( "#carouselContainer" ).load( "carousel.php" );
</script>

File B (carousel.php) contains the code of the carousel with the images:

<div class="module module--horizontal">
  <div id="Carousel" class="glide">
    <div class="glide__wrapper">
      <ul class="glide__track">
        <li class="glide__slide">
          <div class="box" style="background-color: #77A7FB;">  
            <div>
              <img src="http://www.brussels.info/grand-place-brussels.jpg" style="width:100%; height:100%;" />
            </div>
          </div>
        </li>
        <li class="glide__slide">
          <div class="box" style="background-color: #FBCB43;">
            Second slide
          </div>
        </li>
      </ul>
   </div>
   <div class="glide__bullets"></div>
</div>

<script> var carousel = $('#Carousel').glide({ type: 'carousel', startAt: 1, touchDistance: 2, autoplay: 0, autoheight: true }); </script>

The problem is when you open file A (http://reistip.nl/carousel-test.php ) the first time, then the height of the image in the carousel is very small. The height should be 100% but is instead fixed to (about) 20 pixels. Once you start using the carousel, refresh the page or open the console.log the height of the image changes and becomes as it should be (100%).

How can I display the height of the image in the carousel to 100% when the page is opened for the first time?

(note: to reproduce this problem make sure to open a new tab in the browser after visiting file A, if you only refresh the page of file A the problem does not appear again)

Upvotes: 0

Views: 772

Answers (1)

Anil Shrestha
Anil Shrestha

Reputation: 1200

you can't change the height of image by giving 100% because. an image height is already a 100% to it's height. if you really want to change the height of your image then you should define it in px value but i suggest you not to change the height because it will stretch your image. instead you can add certain height to your carousel wrapper and set overflow hidden. it will show the image inside wrapper and the overflow image will be hidden.

Upvotes: 0

Related Questions