From 19d1fed9896c4deea56ca2fc4856967bc373a5fb Mon Sep 17 00:00:00 2001
From: Ismail9k <dev@ismail9k.com>
Date: Wed, 8 Jan 2025 14:43:59 +0300
Subject: [PATCH] refactor: improve pagination button styles and ensure correct
 slide calculation

---
 src/components/Pagination/Pagination.css | 26 +++++++++++-------------
 src/components/Pagination/Pagination.ts  |  2 +-
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/Pagination/Pagination.css b/src/components/Pagination/Pagination.css
index 73e42d3..a8b1b85 100644
--- a/src/components/Pagination/Pagination.css
+++ b/src/components/Pagination/Pagination.css
@@ -21,29 +21,23 @@
 }
 
 .carousel__pagination-button {
-  background: transparent;
   border: 0;
   cursor: pointer;
-  display: block;
-  margin: 0;
-  padding: var(--vc-pgn-margin);
-}
-
-.carousel__pagination-button--active::after {
-  background-color: var(--vc-pgn-active-color);
-}
-
-.carousel__pagination-button::after {
+  margin: var(--vc-pgn-margin);
   background-color: var(--vc-pgn-background-color);
   border-radius: var(--vc-pgn-border-radius);
-  content: '';
   display: block;
   height: var(--vc-pgn-height);
   width: var(--vc-pgn-width);
+  padding: 0;
+}
+
+.carousel__pagination-button--active {
+  background-color: var(--vc-pgn-active-color);
 }
 
 @media (hover: hover) {
-  .carousel__pagination-button:hover::after {
+  .carousel__pagination-button:hover {
     background-color: var(--vc-pgn-active-color);
   }
 }
@@ -57,8 +51,12 @@
     transform: translateY(50%);
   }
 
-  .carousel__pagination-button::after {
+  .carousel__pagination-button {
     height: var(--vc-pgn-width);
     width: var(--vc-pgn-height);
   }
 }
+
+.carousel.is-btt .carousel__pagination {
+  flex-direction: column-reverse;
+}
diff --git a/src/components/Pagination/Pagination.ts b/src/components/Pagination/Pagination.ts
index d96b5cc..b239f9c 100644
--- a/src/components/Pagination/Pagination.ts
+++ b/src/components/Pagination/Pagination.ts
@@ -83,7 +83,7 @@ export const Pagination = defineComponent<PaginationProps>({
           onClick: () =>
             carousel.nav.slideTo(
               isPaginated.value
-                ? slide * +carousel.config.itemsToShow + offset.value
+                ? Math.floor(slide * +carousel.config.itemsToShow + offset.value)
                 : slide
             ),
         })