[change] カルーセルのスタイル調整

Kyutech-C3 · Nov 30, 2022 · 802d8ac · 802d8ac
1 parent 0ab4853
commit 802d8ac
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/components/works/WorksCarousel.vue b/components/works/WorksCarousel.vue
@@ -3,7 +3,11 @@
     <!-- main swiper -->
     <works-carousel-main :assets="showAssets" v-model="slideNumber" />
     <!-- thumb swiper -->
-    <works-carousel-thumb :assets="showAssets" v-model="slideNumber" />
+    <works-carousel-thumb
+      v-if="showAssets.length > 1"
+      :assets="showAssets"
+      v-model="slideNumber"
+    />
   </div>
 </template>
 

diff --git a/components/works/WorksCarouselMain.vue b/components/works/WorksCarouselMain.vue
@@ -86,12 +86,30 @@
       @mouseenter="showSwiperButtonNext = true"
     ></div>
     <div
-      class="absolute top-0 left-0 h-full w-[10%] z-10"
+      class="
+        absolute
+        top-0
+        left-0
+        h-[43vw]
+        min-h-[68%]
+        max-h-[85%]
+        w-[10%]
+        z-10
+      "
       @mouseover="showSwiperButtonPrev = true"
       @mouseleave="showSwiperButtonPrev = false"
     ></div>
     <div
-      class="absolute top-0 right-0 h-full w-[10%] z-10"
+      class="
+        absolute
+        top-0
+        right-0
+        h-[43vw]
+        min-h-[68%]
+        max-h-[85%]
+        w-[10%]
+        z-10
+      "
       @mouseenter="showSwiperButtonNext = true"
       @mouseout="showSwiperButtonNext = false"
     ></div>

diff --git a/components/works/WorksCarouselThumb.vue b/components/works/WorksCarouselThumb.vue
@@ -16,7 +16,10 @@
       "
       ref="SliderWrapper"
     >
-      <div class="flex justify-center items-center h-full w-max" ref="Slider">
+      <div
+        class="flex justify-center items-center h-full w-max mx-auto my-0"
+        ref="Slider"
+      >
         <div
           v-for="(asset, index) in assets"
           :key="index"