Travel Catalog with Swiper


#1

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.

SEE SHOWCASE HERE


Swiper - Show navigation arrows on hover and in mobile view
#2

Hello,
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.

Thanks


#3

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.


#4

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>

#5

I was adding a card with image and then replacing the image with a swiper which seemed logical but wasn’t as it must be in card body not just card div.
Thanks @Teodor.

Here’re my cards in action http://kalimeraholidays.com