For this showcase we used Bootstrap 4 Cards and the Swiper Component to create a catalog of destinations for a repsponsive Travel Company website. We added the Swiper inside the cards and included 3 images per destination, which the users can swipe through.
could you write more … for example how did you make swiper to fill the boundaries of the card instead of spilling all over.
I want to place images that are bigger than the card so they shrink and look nicely like yours.
I don’t want to create smaller images as I want them to be responsive. I will use them in another place on the site but in other dimensions.
Did you add ‘img-fluid’, a Bootstrap utility class, to the img src tag as in the example code in the showcase?
<img class="img-fluid" src="img/1.jpg">
Adding that makes the image responsive.
The swiper is placed in card body, with padding 0 applied to it:
<div class="card-body p-0"> <div is="dmx-swiper" id="swiper1"...> slides here </div> </div>