refactor: improve pagination button styles and ensure correct slide c…

…alculation
ismail9k · Jan 8, 2025 · 19d1fed · 19d1fed
1 parent 563f6fc
commit 19d1fed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git 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
@@ -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
             ),
         })