How do I center align this card?

Question

I'm having a problem with a card made with swiperjs. I'm trying to center the card on the mobile screen but I can't. Please help me solve this problem.

var swiper = new Swiper(".slide-content", {
  slidesPerView: 3,
  spaceBetween: 30,
  loop: true,
  centerSlide: 'true',
  fade: 'true',
  grabCursor: 'true',
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

Answer 1

var swiper = new Swiper(".slide-content", {
  slidesPerView: 1, // Set the number of visible slides to 1
  loop: true,
  centerSlides: true, // Use 'centerSlides' instead of 'centerSlide'
  fadeEffect: true, // Use 'fadeEffect' instead of 'fade'
  grabCursor: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});