    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     
   <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col"> 
                <div class="swiper shopswiper"> 
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                           <div class="col-12">
                <a class="" href="barrel-ms-m10-tapped.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/1.jpg" alt="product-img">
                  </div> 
                  <div class="service-content">
                    <h5 class="text-white service-title">Barrel MS  – M10 Tapped</h5>
                   
                  </div>  
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide">
                           <div class="col-12">
                <a class="" href="brass-sleeve.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/2.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Brass Sleeve</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide">
                           <div class="col-12">
                <a class="" href="thrust-bearing.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/3.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Thrust Bearing</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide"> 
                      <div class="col-12">
                <a class="" href="impeller-nut-with-helicoil.php">  
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/4.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Impeller Nut  with Helicoil</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide"> 
                      <div class="col-12">
                <a class="" href="seat-ring-holders-bearing-carriers.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/14.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Seat Ring Holders & Bearing Carriers</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide">
                           <div class="col-12">
                <a class="" href="sleeves.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/8.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Sleeves</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide"> 
                      <div class="col-12">
                <a class="" href="barrels-trunnions.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/10.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Barrels & trunnions</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                      <div class="swiper-slide"> 
                      <div class="col-12">
                <a class="" href="sleeves-with-keyway.php"> 
					<div class="service-item">
                  <div class="service-thumb">
                    <img src="images/product/12.jpg" alt="product-img">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Sleeves with Keyway</h5>
                   
                  </div>
                 
                </div></a>
              </div>
              </div>
                     
                    </div>
                    <div class="swiper-pagination"></div>
                  </div>
                </div>
            </div>
        </div>
    </section>
     <style>   
   

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /*background: #fff;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .swiper-pagination{
          transform: translatey(50px);
    }
    /*.swiper-slide .service-thumb img{*/
    /*   aspect-ratio: 3 / 2;*/
    /*}*/
  </style>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".shopswiper", {
      slidesPerView: 1,
      loop: true,
      autoplay:true,
      spaceBetween: 10,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 4,
          spaceBetween: 30,
        },
      },
    });
  </script>
    