Merge pull request #467 from ismail9k/172-itemstoshow-auto

Support items to show auto

Author: ismail9k

README.md

@@ -70,8 +70,8 @@ const carouselConfig = {
 
 Visit our [documentation website](https://vue3-carousel.ismail9k.com/) for detailed usage and examples:
 
-- [Getting Started](https://vue3-carousel.ismail9k.com/guide)
-- [Carousel Component](https://vue3-carousel.ismail9k.com/components/carousel)
+- [Getting Started](https://vue3-carousel.ismail9k.com/getting-started)
+- [Carousel Config](https://vue3-carousel.ismail9k.com/config)
 - [Slide Component](https://vue3-carousel.ismail9k.com/components/slide)
 - [Navigation Component](https://vue3-carousel.ismail9k.com/components/navigation)
 - [Pagination Component](https://vue3-carousel.ismail9k.com/components/pagination)

eslint.config.js

@@ -21,7 +21,7 @@ export default tseslint.config(
       },
     },
     rules: {
-      'no-console': 'error',
+      'no-console': 'off',
       '@typescript-eslint/no-unused-vars': 'error',
       '@typescript-eslint/no-empty-function': 'off',
       '@typescript-eslint/no-non-null-assertion': 'off',

playground/App.vue

@@ -498,7 +498,7 @@ select {
 }
 
 .carousel__slide--active .carousel-item {
-  border: 2px solid red;
+  box-shadow: inset 0 0 0 2px red;
 }
 .config-panel-buttons-row {
   display: flex;

src/components/Carousel/Carousel.css

@@ -1,31 +1,37 @@
+.carousel,
+.carousel * {
+  box-sizing: border-box;
+}
+
 .carousel {
   position: relative;
-  text-align: center;
-  box-sizing: border-box;
   touch-action: pan-y;
   overscroll-behavior: none;
+  z-index: 1;
+  height: var(--vc-carousel-height);
 }
 
 .carousel.is-dragging {
   touch-action: none;
 }
 
-.carousel * {
-  box-sizing: border-box;
-}
-
 .carousel__track {
   display: flex;
+  list-style: none;
   padding: 0 !important;
   margin: 0 !important;
+  width: 100%;
+  height: 100%;
   position: relative;
   transition: transform ease-out;
-  height: var(--vc-trk-height, auto);
-  transition-duration: var(--vc-trk-transition-duration);
+  transition-duration: var(--vc-transition-duration);
+  gap: var(--vc-slide-gap);
 }
 
 .carousel__viewport {
   overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
 .carousel__sr-only {
@@ -53,13 +59,13 @@
 
 .carousel.is-vertical {
   .carousel__slide--clone:first-child {
-    margin-block-start: var(--vc-trk-cloned-offset);
+    margin-block-start: var(--vc-cloned-offset);
   }
 }
 
 .carousel:not(.is-vertical) {
   .carousel__slide--clone:first-child {
-    margin-inline-start: var(--vc-trk-cloned-offset);
+    margin-inline-start: var(--vc-cloned-offset);
   }
 }
 
@@ -76,7 +82,7 @@
     width: 100% !important;
     height: 100% !important;
     transition: opacity ease-in-out;
-    transition-duration: var(--vc-trk-transition-duration);
+    transition-duration: var(--vc-transition-duration);
     grid-area: 1 / 1; /* Make all slides occupy the same grid cell */
     pointer-events: none; /* Prevent inactive slides from being clickable */
   }