1.2.5 コンポーネントの分割 2

Slider コンポーネントに置き換え
tenkao · May 10, 2023 · 36e5b82 · 36e5b82
1 parent 3ed35f9
commit 36e5b82
Showing 1 changed file with 3 additions and 64 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,4 +1,6 @@
 <script>
+  import Slider from './Slider.svelte';
+
   // 商品詳細の変数
   let product = {
     id: 'svelte-book',
@@ -25,25 +27,6 @@
   function addToCart(productId) {
     cart = [...cart, productId]
   }
-
-  // 画像スライダー表示のための変数・関数
-  let sliderCenterIndex = 0
-  let sliderLeftIndex = product.images.length - 1
-  let sliderRightIndex = 1
-
-  function sliderMoveLeft() {
-    const length = product.images.length
-    sliderCenterIndex = (sliderCenterIndex - 1 + length) % length
-    sliderLeftIndex = (sliderCenterIndex - 1 + length) % length
-    sliderRightIndex = (sliderCenterIndex + 1) % length
-  }
-
-  function sliderMoveRight() {
-    const length = product.images.length
-    sliderCenterIndex = (sliderCenterIndex + 1) % length
-    sliderLeftIndex = (sliderCenterIndex - 1 + length) % length
-    sliderRightIndex = (sliderCenterIndex + 1) % length
-  }
 </script>
 
 <header class="header">
@@ -61,13 +44,7 @@
 <article class="product">
   <div class="product-main">
     <div class="image-container">
-      <div class="slider">
-        <img src="{product.images[sliderLeftIndex]}" alt="スライダー画像（左）" class="slider-item left">
-        <img src="{product.images[sliderCenterIndex]}" alt="スライダー画像" class="slider-item">
-        <img src="{product.images[sliderRightIndex]}" alt="スライダー画像（右）" class="slider-item right">
-        <button class="slider-left-button" on:click={sliderMoveLeft}> ← </button>
-        <button class="slider-right-button" on:click={sliderMoveRight}> → </button>
-      </div>
+      <Slider images={product.images} />
     </div>
     <div>
       <h2>{product.name}</h2>
@@ -147,42 +124,4 @@
     max-width: 400px;
     overflow: hidden;
   }
-
-  .image-container img {
-    width: 100%;
-  }
-
-  .slider {
-    position: relative;
-    width: 80%;
-    margin: 0 10%;
-  }
-
-  .slider-item {
-    width: 100%;
-  }
-
-  .slider-item.left {
-    position: absolute;
-    top: 0;
-    right: 100%;
-  }
-
-  .slider-item.right {
-    position: absolute;
-    top: 0;
-    left: 100%;
-  }
-
-  .slider-left-button {
-    position: absolute;
-    top: 50%;
-    right: 100%;
-  }
-
-  .slider-right-button {
-    position: absolute;
-    top: 50%;
-    left: 100%;
-  }
 </style>