From 26476ee13e24feae18cd2da3c7fad4af7a35fe24 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 29 Mar 2024 18:46:03 +0100
Subject: [PATCH] Add vertical navigation button styles.

---
 demos/090-vertical.html                |  9 ++++++++-
 src/modules/navigation/navigation.less | 14 ++++++++++++++
 src/modules/navigation/navigation.scss | 14 ++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/demos/090-vertical.html b/demos/090-vertical.html
index 67b8aeef2..7ca7203e1 100644
--- a/demos/090-vertical.html
+++ b/demos/090-vertical.html
@@ -24,6 +24,9 @@
     </div>
     <!-- Add Pagination -->
     <div class="swiper-pagination"></div>
+    <!-- Add Navigation -->
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
   </div>
 
 
@@ -38,6 +41,10 @@
         el: '.swiper-pagination',
         clickable: true,
       },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
     });
   </script>
 
@@ -85,4 +92,4 @@
   </style>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/modules/navigation/navigation.less b/src/modules/navigation/navigation.less
index 2d6f8c048..a039d1f7c 100644
--- a/src/modules/navigation/navigation.less
+++ b/src/modules/navigation/navigation.less
@@ -82,3 +82,17 @@
   left: auto;
 }
 /* Navigation font end */
+.swiper-vertical {
+  :is(.swiper-button-next, .swiper-button-prev) {
+    left: 50%;
+    transform: rotate(90deg);
+    transform-origin: left center;
+  }
+  .swiper-button-prev {
+    top: calc(var(--swiper-navigation-size) / 2);
+  }
+  .swiper-button-next {
+    top: auto;
+    bottom: calc(var(--swiper-navigation-size) / 2);
+  }
+}
diff --git a/src/modules/navigation/navigation.scss b/src/modules/navigation/navigation.scss
index 31e671a0a..d0e22a7fc 100644
--- a/src/modules/navigation/navigation.scss
+++ b/src/modules/navigation/navigation.scss
@@ -85,3 +85,17 @@
   left: auto;
 }
 /* Navigation font end */
+.swiper-vertical {
+  :is(.swiper-button-next, .swiper-button-prev) {
+    left: 50%;
+    transform: rotate(90deg);
+    transform-origin: left center;
+  }
+  .swiper-button-prev {
+    top: calc(var(--swiper-navigation-size) / 2);
+  }
+  .swiper-button-next {
+    top: auto;
+    bottom: calc(var(--swiper-navigation-size) / 2);
+  }
+}