Equal height cards in a swiper

Wappler General How To
#1

I have a swiper containing Bootstrap cards, populated from a dynamic data source (though this is probably not relevant). I would like the cards to be of equal height but haven’t managed to achieve this yet.

I don’t think I can put the cards into a card-group which might be one way. I’ve also tried assigning class align-self-stretch to the card - no luck, nor with w-100. I’ve tried adding these classes to various parts of the card…

I would be grateful for any suggestions.

PS one thing that sort of works is assigning a fixed height to the card div. Not a very satisfactory solution.

1 Like
#2

add h-100 to the card class, that should make them all the same size

#3

You can check card decks and card groups .

#4

Thanks @Hyperbytes. I tried that but it didn’t make any difference. It’s possible I did something stupid so I’ll try this again later (I’m not in my office at the moment).

#5

Thanks @s.alpaslan. I tried both of these too - without success. I can see there could be a problem in this case; the swiper markup gets in the way.

#6

Hi Tom,
What’s your swiper structure exactly?

#7

Hi Teodor,
I haven’t used a swiper with dynamic content - so I could be doing something wrong - but it seemed straightforward and works fine, apart from the height. This is the code:

      <div is="dmx-swiper" id="swiper1" grab-cursor="true" loop="true" dmx-bind:slides="sc_recentitems.data.qry_recent_items" space-between="8" navigation="true" autoplay="true" speed="900" slides-per-view="2" slides-per-view-md="2" slides-per-view-lg="4" slides-per-view-xl="5" mousewheel="true" loop-fill="true">                                        
        <div class="swiper-slide"> 
          <div class="card">
            <img class="card-img-top" alt="Card image cap" dmx-bind:src="'jpegs/' + stock_id + '.jpg'">
            <div class="card-body d-flex flex-column">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">{{title}}</p>
              <a href="#" class="btn mx-auto btn-primary">more details</a>
            </div>
          </div>
        </div>                    
      </div>

I fiddled around with it quite a bit, but I think I’ve removed my experimental CSS. I made a slight change to centre the button at the bottom of the card - I think that’s all.

I don’t see how I can wrap the cards in <div class="card-group"> - which would be one way of getting the desired result. Obviously if I put this above <div class="card">, it’s going to wrap each card div, not the group of cards. If I put it outside the repeat, then the swiper divs/classes will get in the way.

#8

I still have issues with swiper and dynamic content Tom, i am having to redesign how the front end of a current site is presented due to the problems

#10

The solution is actually really easy:
Add this in your CSS

 .swiper-slide {
     height: auto;
    }

Then add the class of h-100 to the card:

<div class="card h-100">

Great thing about flex is you don’t need any additional scripts for equal height sibling elements anymore :slight_smile:

7 Likes
#11

Many thanks Teodor - that’s fixed it. This is really helpful as I can think of various cases where I might use cards in a swiper - and they would need to have the same height.

I had tried adding h-100 to the class (not w-100 as I mentioned at the beginning), but don’t think I would have thought of trying height:auto too.

1 Like
#12

Yes, it’s a really nice layout :slight_smile:
As for height auto, this is needed as the default slides style need to be overridden.

#13

Thanks Ben. I think I would have used this solution if it were not for Teodor’s CSS wizadry.

(I discovered I have a few copies of p7EHCscripts.js on my hard disk - a great solution at the time.)

#14

Thanks for the feedback. Yes Teodor’s solution is much better.