Merge pull request #475 from ismail9k/416-add-a-convenient-option-for-styling-pagination

416 add a convenient option for styling pagination

Author: ismail9k

docs/components/navigation.md

@@ -68,6 +68,46 @@ You can customize the navigation buttons using slots:
 | `--vc-nav-height`        | `30px`                    | Navigation button height        |
 | `--vc-nav-width`         | `30px`                    | Navigation button width         |
 
+### Customization Examples
+
+There are two ways to customize the navigation appearance:
+
+#### 1. Using CSS Custom Properties
+
+```css
+.carousel {
+  --vc-nav-background: rgba(0, 0, 0, 0.3);
+  --vc-nav-color: white;
+  --vc-nav-color-hover: #e5e5e5;
+  --vc-nav-border-radius: 50%;
+  --vc-nav-width: 40px;
+  --vc-nav-height: 40px;
+}
+```
+
+#### 2. Direct CSS Override
+
+```css
+.carousel__next,
+.carousel__prev {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  color: white;
+}
+
+.carousel__next:hover,
+.carousel__prev:hover {
+  color: #e5e5e5;
+}
+
+.carousel__next--disabled,
+.carousel__prev--disabled {
+  opacity: 0.3;
+}
+```
+
 ## Accessibility
 
 - Buttons include descriptive ARIA labels

docs/components/pagination.md

@@ -38,10 +38,43 @@ import { Pagination as CarouselPagination } from 'vue3-carousel'
 | `--vc-pgn-active-color`     | `var(--vc-clr-primary)`   | Active pagination button color     |
 | `--vc-pgn-background-color` | `var(--vc-clr-secondary)` | Pagination button background color |
 | `--vc-pgn-border-radius`    | `0`                       | Pagination button border radius    |
+| `--vc-pgn-gap`              | `6px`                     | Gap between pagination buttons     |
 | `--vc-pgn-height`           | `4px`                     | Pagination button height           |
-| `--vc-pgn-margin`           | `6px 5px`                 | Pagination button margin           |
+| `--vc-png-bottom`           | `10px`                    | Bottom spacing for pagination      |
+| `--vc-png-left`             | `auto`                    | Left spacing for vertical mode     |
+| `--vc-png-right`            | `10px`                    | Right spacing for vertical mode    |
 | `--vc-pgn-width`            | `16px`                    | Pagination button width            |
 
+### Customization Examples
+
+There are two ways to customize the pagination appearance:
+
+#### 1. Using CSS Custom Properties
+
+```css
+.carousel {
+  --vc-pgn-background-color: white;
+  --vc-pgn-active-color: red;
+  --vc-pgn-border-radius: 5px;
+  --vc-pgn-height: 5px;
+  --vc-pgn-width: 5px;
+}
+```
+
+#### 2. Direct CSS Override
+
+```css
+.carousel__pagination-button {
+  height: 5px;
+  width: 5px;
+  border-radius: 5px;
+  background-color: white;
+}
+.carousel__pagination-button--active {
+  background-color: red;
+}
+```
+
 ## Accessibility
 
 - Pagination buttons are properly labeled for screen readers

src/components/Carousel/Carousel.css

@@ -20,8 +20,8 @@
   gap: var(--vc-slide-gap);
   height: 100%;
   list-style: none;
-  margin: 0 !important;
-  padding: 0 !important;
+  margin: 0;
+  padding: 0;
   position: relative;
   transition: transform ease-out;
   transition-duration: var(--vc-transition-duration);
@@ -45,6 +45,10 @@
   width: 1px;
 }
 
+.carousel.is-rtl {
+  direction: rtl;
+}
+
 .carousel.is-ttb .carousel__track {
   flex-direction: column;
 }
@@ -70,12 +74,12 @@
 
 .carousel.is-effect-fade .carousel__slide {
   grid-area: 1 / 1;
-  height: 100% !important;
+  height: 100%;
   opacity: 0;
   pointer-events: none;
   transition: opacity ease-in-out;
   transition-duration: var(--vc-transition-duration);
-  width: 100% !important;
+  width: 100%;
 }
 
 .carousel.is-effect-fade .carousel__slide--active {

src/components/Icon/Icon.css

@@ -1,5 +1,5 @@
 :root {
-  --vc-icn-width: 1.2em;
+  --vc-icn-width: 100%;
 }
 
 .carousel__icon {

src/components/Navigation/Navigation.css

@@ -13,18 +13,15 @@
   background: var(--vc-nav-background);
   border: 0;
   border-radius: var(--vc-nav-border-radius);
-  box-sizing: content-box;
   color: var(--vc-nav-color);
   cursor: pointer;
   display: flex;
   font-size: var(--vc-nav-height);
   height: var(--vc-nav-height);
   justify-content: center;
-  margin: 0 10px;
   padding: 0;
   position: absolute;
-  text-align: center;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
   width: var(--vc-nav-width);
 }
@@ -36,50 +33,37 @@
 }
 
 .carousel__next {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .carousel__prev {
-  left: 0;
+  inset-inline-start: 0;
 }
 
-.carousel.is-btt {
-  .carousel__next {
-    top: 0;
-  }
+.carousel.is-vertical {
+  .carousel__next,
   .carousel__prev {
-    bottom: 0;
+    inset-inline: auto 50%;
+    inset-block-start: auto;
+    transform: translateX(50%);
   }
-}
 
-.carousel.is-rtl {
-  .carousel__next {
-    left: 0;
-    right: auto;
+  &.is-ttb {
+    .carousel__next {
+      inset-block-end: 0;
+    }
+    .carousel__prev {
+      inset-block-start: 0;
+    }
   }
-  .carousel__prev {
-    left: auto;
-    right: 0;
-  }
-}
 
-.carousel.is-ttb {
-  .carousel__next {
-    bottom: 0;
-  }
-  .carousel__prev {
-    top: 0;
-  }
-}
-
-.carousel.is-vertical {
-  .carousel__next,
-  .carousel__prev {
-    left: auto;
-    margin: 5px auto;
-    right: 50%;
-    top: auto;
-    transform: translate(50%);
+  &.is-btt {
+    .carousel__next {
+      inset-block-start: 0;
+    }
+    .carousel__prev {
+      inset-block-end: 0;
+    }
   }
 }
 

src/components/Pagination/Pagination.css

@@ -2,34 +2,37 @@
   --vc-pgn-active-color: var(--vc-clr-primary);
   --vc-pgn-background-color: var(--vc-clr-secondary);
   --vc-pgn-border-radius: 0;
+  --vc-pgn-gap: 6px;
   --vc-pgn-height: 4px;
-  --vc-pgn-margin: 6px 5px;
+  --vc-png-bottom: 10px;
+  --vc-png-left: auto;
+  --vc-png-right: 10px;
   --vc-pgn-width: 16px;
 }
 
 .carousel__pagination {
-  bottom: 5px;
+  bottom: var(--vc-png-bottom);
   display: flex;
+  gap: var(--vc-pgn-gap);
   justify-content: center;
   left: 50%;
-  line-height: 0;
-  list-style: none !important;
-  margin: 0 !important;
-  padding: 0 !important;
+  list-style: none;
+  margin: 0;
+  padding: 0;
   position: absolute;
   transform: translateX(-50%);
 }
 
 .carousel__pagination-button {
-  border: 0;
-  cursor: pointer;
-  margin: var(--vc-pgn-margin);
   background-color: var(--vc-pgn-background-color);
+  border: 0;
   border-radius: var(--vc-pgn-border-radius);
+  cursor: pointer;
   display: block;
   height: var(--vc-pgn-height);
-  width: var(--vc-pgn-width);
+  margin: 0;
   padding: 0;
+  width: var(--vc-pgn-width);
 }
 
 .carousel__pagination-button--active {
@@ -46,8 +49,8 @@
   .carousel__pagination {
     bottom: 50%;
     flex-direction: column;
-    left: auto;
-    right: 5px;
+    left: var(--vc-png-left);
+    right: var(--vc-png-right);
     transform: translateY(50%);
   }