Svelte reactive statements 를 활용한 이미지 슬라이더

 
 
설명은 주석참고

 
 

이미지 3개 슬라이더

 
script

let SliderCenterIndex = 0;
  // $: reactive statement로 SliderCenterIndex가 실시간으로 변경됨
  // 처음에 왼쪽 버튼을 누르면 맨마지막인 두번째 인덱스가 위치해야함 2%3 = 2 
  $:SliderLeftIndex = (SliderCenterIndex -1 + product.images.length) % product.images.length; 
  // 처음 오른쪽버튼을 눌렀을때 다음 위치인 인덱스 1%3 =1
  $:SliderRightIndex = (SliderCenterIndex +1) % product.images.length  

  
  // 왼쪽버튼 클릭시 SliderCenterIndex가 변경되서 SliderLeftIndex에 전달
 function sliderMoveLeft() {
  SliderCenterIndex = (SliderCenterIndex -1 + product.images.length) % product.images.length; // 2%3 =2
 }
   // 오른쪽쪽버튼 클릭시 SliderCenterIndex가 변경되서 SliderRightIndex에 전달
 function sliderMoveRight() {
  SliderCenterIndex = (SliderCenterIndex +1) % product.images.length; // 1%3 =1
 }

 
 
html

<main>
  <article class="product">
    <div class="product-main">
      <div class="image-container">
  <div class="slider">
    <img src={product.images[SliderLeftIndex]} alt="sl" class="slider-item left">
    <img src={product.images[SliderCenterIndex]} alt="sc" class="slider-item">
    <img src={product.images[SliderRightIndex]} alt="sr" class="slider-item right">
    <button class="slider-left-button" on:click={sliderMoveLeft}>←</button>
    <button class="slider-right-button" on:click={sliderMoveRight}>→</button>
  </div>
  </div>
  </div>
</article>
</main>

 
 
 
참고한 책 
https://www.yes24.com/Product/Goods/125931860

실전 스벨트 & 스벨트킷 입문 - 예스24