fixed styles and type slider

luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css

@@ -400,6 +400,13 @@ input[type="number"]::-webkit-outer-spin-button {
         width: 30%;
         height: 80%;
     }
+    .btns-style__steps button {
+        width: 60px;
+        height: 50px;
+    }
+    .swiper-slide {
+        margin-right: 29px !important;
+    }
     .steps-btns__display {
         justify-content: center;
     }
@@ -456,6 +463,13 @@ input[type="number"]::-webkit-outer-spin-button {
     .steps-btns__display {
         justify-content: center;
     }
+    .btns-style__steps button {
+        width: 60px;
+        height: 50px;
+    }
+    .swiper-slide {
+        margin-right: 30px !important;
+    }
     .margin-lines .firstline {
         margin-top: 2%;
     }
@@ -506,6 +520,7 @@ input[type="number"]::-webkit-outer-spin-button {
     user-select: none;
     width: 100%;
     height: 100%;
+    margin-top: 18px;
 }
 
 .swiper-slide {
@@ -522,8 +537,9 @@ input[type="number"]::-webkit-outer-spin-button {
     object-fit: cover;
 }
 
-.swiper-pagination {
-    position: unset !important;
+.swiper-button-prev:after, .swiper-button-next:after {
+    font-size: 30px;
+    color: rgb(210 31 31 / 62%);
 }
 
 /* /Swiper */

luckydiamond/src/pages/games-pages/SapergamePage.vue

@@ -44,7 +44,7 @@
             <button class="btn-claim">Забрать 15 АР</button>
           </div>
           <div class="saper-start__steps btns-style__steps">
-            <swiper v-if="PercentageGameSteps.length" :key="PercentageGameSteps[0]" :spaceBetween="30" :slides-per-view="4" :centeredSlides="false" :pagination="{ clickable: true }" :modules="modules">
+            <swiper v-if="PercentageGameSteps.length" :key="PercentageGameSteps[0]" :spaceBetween="30" :slides-per-view="4" :centeredSlides="false" :navigation="true" :modules="modules">
               <template v-for="(item, index) in PercentageGameSteps" :key="index">
                 <swiper-slide>
                   <div class="steps-btns__display">
@@ -138,11 +138,11 @@ import { GetPercentageSteps } from "@/assets/js/games/saper/SaperAPI";
 
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
-import 'swiper/css/pagination';
+import "swiper/css/navigation";
 import SwiperCore from 'swiper/core';
-import { Pagination } from "swiper/modules";
+import {Navigation } from "swiper/modules";
 
-SwiperCore.use([Pagination]);
+SwiperCore.use([Navigation]);
 
 import '@/assets/css/PagesStyles/games-pages/saper.css'
 import SaperNumbers from "@/mocks/SaperNumbers";
@@ -160,7 +160,7 @@ export default {
       amountDeposit: 5,
       flippedCards: [],
       PercentageGameSteps: [],
-      modules: [ Pagination ]
+      modules: [ Navigation ]
     }
   },
   watch: {