feat: add smooth scroll for carousel

saadeghi · Jul 5, 2021 · 52880e1 · 52880e1
1 parent d918772
commit 52880e1
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/src/components/unstyled/carousel.css b/src/components/unstyled/carousel.css
@@ -1,6 +1,7 @@
 .carousel{
   @apply flex overflow-x-scroll;
 	scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
   &-vertical{
     @apply flex-col overflow-y-scroll;
     scroll-snap-type: y mandatory;

diff --git a/src/docs/pages/components/carousel.vue b/src/docs/pages/components/carousel.vue
@@ -11,7 +11,7 @@
         { class: 'carousel-vertical', desc: 'Vertical carousel' },
       ]
     }"/>
-    <Wrapper title="carousel (snap to setart)">
+    <Wrapper title="carousel (snap to start)">
       <div class="carousel rounded-box">
         <div class="carousel-item">
           <img src="https://picsum.photos/id/500/256/144" />
@@ -86,6 +86,61 @@
         </div>
       </div>
     </Wrapper>
+
+    <Wrapper title="slider with indicators">
+      <div class="w-full carousel">
+        <div class="w-full pt-20 carousel-item" id="item1">
+          <img src="https://picsum.photos/id/500/800/300" class="w-full" />
+        </div>
+        <div class="w-full pt-20 carousel-item" id="item2">
+          <img src="https://picsum.photos/id/501/800/300" class="w-full" />
+        </div>
+        <div class="w-full pt-20 carousel-item" id="item3">
+          <img src="https://picsum.photos/id/502/800/300" class="w-full" />
+        </div>
+        <div class="w-full pt-20 carousel-item" id="item4">
+          <img src="https://picsum.photos/id/503/800/300" class="w-full" />
+        </div>
+      </div>
+      <div class="flex justify-center w-full py-4 space-x-2">
+        <a class="btn btn-xs btn-circle" :href="`/components/carousel#item1`">1</a>
+        <a class="btn btn-xs btn-circle" :href="`/components/carousel#item2`">2</a>
+        <a class="btn btn-xs btn-circle" :href="`/components/carousel#item3`">3</a>
+        <a class="btn btn-xs btn-circle" :href="`/components/carousel#item4`">4</a>
+      </div>
+    </Wrapper>
+    <Wrapper title="slider with next/prev">
+      <div class="w-full carousel">
+        <div class="relative w-full pt-20 carousel-item" id="slide1">
+          <img src="https://picsum.photos/id/500/800/300" class="w-full" />
+          <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+            <a class="btn btn-circle" :href="`/components/carousel#slide4`">❮</a>
+            <a class="btn btn-circle" :href="`/components/carousel#slide2`">❯</a>
+          </div>
+        </div>
+        <div class="relative w-full pt-20 carousel-item" id="slide2">
+          <img src="https://picsum.photos/id/501/800/300" class="w-full" />
+          <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+            <a class="btn btn-circle" :href="`/components/carousel#slide1`">❮</a>
+            <a class="btn btn-circle" :href="`/components/carousel#slide3`">❯</a>
+          </div>
+        </div>
+        <div class="relative w-full pt-20 carousel-item" id="slide3">
+          <img src="https://picsum.photos/id/502/800/300" class="w-full" />
+          <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+            <a class="btn btn-circle" :href="`/components/carousel#slide2`">❮</a>
+            <a class="btn btn-circle" :href="`/components/carousel#slide4`">❯</a>
+          </div>
+        </div>
+        <div class="relative w-full pt-20 carousel-item" id="slide4">
+          <img src="https://picsum.photos/id/503/800/300" class="w-full" />
+          <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+            <a class="btn btn-circle" :href="`/components/carousel#slide3`">❮</a>
+            <a class="btn btn-circle" :href="`/components/carousel#slide1`">❯</a>
+          </div>
+        </div>
+      </div>
+    </Wrapper>
     <Wrapper title="carousel with full width items">
       <div class="w-64 carousel rounded-box">
         <div class="w-full carousel-item">