Question 170976 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I center this card in Javascript?

I am facing a problem with cards that I had made with swiperjs. I am trying to center the card in the mobile screen but I couldn’t. Please help me to fix it.

enter image description here

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",
  },
});
Tags:

2

Answers


  1. 0

    try this:

    var swiper = new Swiper(".slide-content", {
  spaceBetween: 30,
  loop: true,
  centeredSlides: true,
  grabCursor: true,
  slidesPerView: 'auto',
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
    Login or Signup to reply.
  2. 0 
    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",
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search