Implement jQuery Swiper slider with cards effect

I created a horizontal swiper where images can automatically swipe using swiper. There are 5 images in total.

I have two issues with this:

1. After page loads or is refreshed, it does not put the images at the center

2. I want to have just 3 images instead of 5 images. So When I try remove 2 images to make it 3 images, the display is scattered.

How do I have 3 images instead of 5?

In a clear understanding, I want to have exactly as the above image (3 images) and still be able to automatically swipe images

section {position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2196f3; overflow: hidden;}
.swiper-container {width: 100%;}
.swiper-slide {margin: 0 auto; width: 320px; background-position: center; text-align: center; font-weight: 900; font-size: 14pt;}
.testimonialBox {position: relative; width:100%; background-size: contain; background: #fff; box-shadow: 0 15px 50px rgba(0,0,0,0.2); border-radius: 10px;}
.showcontent {width: 100%; height: auto; margin: 0 auto; overflow: hidden; border-radius: 10px;}
.showcontent img {width: 100%; border-radius: 10px; height: auto;}
.swiper-wrapper {align-items: center; display: flex; height: auto; margin: 0 auto; position: relative;}
.swipeimg {height: auto; width: 100%; background-size: contain;}
 
<div>
   <div class="MySlider">
       <section>
           <div class="swiper-container">
               <div class="swiper-wrapper">
                   <div class="swiper-slide">
                       <label>Slide 1</label>
                       <div class="testimonialBox">
                           <div class="showcontent">
                               <img class="swipeimg" alt="" src="images/A/customer-support.png" />
                           </div>
                       </div>
                   </div>
                   <div class="swiper-slide">
                       <label>Slide 2</label>
                       <div class="testimonialBox">
                           <div class="showcontent">
                               <img class="swipeimg" alt="" src="images/A/right-click.png" />
                           </div>
                       </div>
                   </div>
                   <div class="swiper-slide">
                       <label>Slide 3</label>
                       <div class="testimonialBox">
                           <div class="showcontent">
                               <img class="swipeimg" alt="" src="images/A/vectorclick.png" />
                           </div>
                       </div>
                   </div>
                   <div class="swiper-slide">
                        <label>Slide 4</label>
                       <div class="testimonialBox">
                           <div class="showcontent">
                               <img class="swipeimg" alt="" src="images/A/layers (3).png" />
                           </div>
                       </div>
                   </div>
                   <div class="swiper-slide">
                       <label>Slide 5</label>
                       <div class="testimonialBox">
                           <div class="showcontent">
                               <img class="swipeimg" alt="" src="images/A/career.png" />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </section>
        <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
        <script type="text/javascript">
            var swiper = new Swiper('.swiper-container', {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    modifier: 2,
                    slideShadows: true,
                },
                loop: true,
                autoplay: true
            });
        </script>
    </div>
</div>