So, I'm using SwiperJs with autoheight. I expected that on slide change the container adapts its height depending on the content (simple images in my case). And it does update on slide change.

The problem is that on first load the slide seems to miscalculate the height and makes it a square, ignoring the content height.

This are my dependencies:

"dependencies": {
      "next": "12.1.6",
      "react": "18.2.0",
      "react-dom": "18.2.0",
      "swiper": "^8.2.4"
    },

This is the ponent:

return (
    <article className='card mb-8 block'>
        <div className='w-full'>
            <Swiper autoHeight loop spaceBetween={0} slidesPerView={1}>
                {images.map((image, i) => {
                    return (
                        <SwiperSlide key={i}>
                            <div className='custom-img-container'>
                                <Image className='custom-img' layout='fill' src={image} objectFit='cover' />
                            </div>
                        </SwiperSlide>
                    )
                })}
            </Swiper>
        </div>
   </article>
)

So, I'm using SwiperJs with autoheight. I expected that on slide change the container adapts its height depending on the content (simple images in my case). And it does update on slide change.

The problem is that on first load the slide seems to miscalculate the height and makes it a square, ignoring the content height.

This are my dependencies:

"dependencies": {
      "next": "12.1.6",
      "react": "18.2.0",
      "react-dom": "18.2.0",
      "swiper": "^8.2.4"
    },

This is the ponent:

return (
    <article className='card mb-8 block'>
        <div className='w-full'>
            <Swiper autoHeight loop spaceBetween={0} slidesPerView={1}>
                {images.map((image, i) => {
                    return (
                        <SwiperSlide key={i}>
                            <div className='custom-img-container'>
                                <Image className='custom-img' layout='fill' src={image} objectFit='cover' />
                            </div>
                        </SwiperSlide>
                    )
                })}
            </Swiper>
        </div>
   </article>
)

• javascript
• css
• reactjs
• next.js
• swiper.js

Share Improve this question Follow edited May 31, 2024 at 12:41 Sébastien Gicquel 4,38677 gold badges5757 silver badges8787 bronze badges asked Jun 21, 2022 at 17:59 Nuno LemosNuno Lemos 1111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I added these two properties and it seems to work fine:

  observer: true,
  observeParents: true,