Vue 3 실전: 캐러셀 슬라이더

const{createApp,ref,onMounted,onUnmounted}=Vue;
createApp({
  setup(){
    const slides=[
      {title:'HTML5',desc:'웹의 뼈대를 해체하라',color:'#ff6b35'},
      {title:'CSS3',desc:'스타일을 해부하라',color:'#3b82f6'},
      {title:'JavaScript',desc:'로직을 분해하라',color:'#f59e0b'},
      {title:'Vue 3',desc:'컴포넌트를 해체하라',color:'#22c55e'},
    ];
    const curr=ref(0);let timer;
    const next=()=>curr.value=(curr.value+1)%slides.length;
    const prev=()=>curr.value=(curr.value-1+slides.length)%slides.length;
    onMounted(()=>timer=setInterval(next,3000));
    onUnmounted(()=>clearInterval(timer));
    return{slides,curr,next,prev};
  },
  template:`<div>
    <div style='position:relative;overflow:hidden;height:100px;background:#0a0a0a;margin-bottom:8px;display:flex;align-items:center;justify-content:center;'>
      <div :style='{color:slides[curr].color}' style='text-align:center;'>
        <div style='font-size:20px;font-weight:bold;letter-spacing:0.05em;'>{{slides[curr].title}}</div>
        <div style='font-size:11px;color:#555;margin-top:4px;'>{{slides[curr].desc}}</div>
      </div>
    </div>
    <div style='display:flex;justify-content:space-between;align-items:center;'>
      <button @click='prev' style='background:#1a1a1a;color:#888;border:none;padding:6px 12px;cursor:pointer;font-size:11px;'>◀</button>
      <div style='display:flex;gap:6px;'>
        <div v-for='(s,i) in slides' :key='i' @click='curr=i' :style='{background:curr===i?s.color:"#1a1a1a",width:"8px",height:"8px",borderRadius:"50%",cursor:"pointer"}'></div>
      </div>
      <button @click='next' style='background:#1a1a1a;color:#888;border:none;padding:6px 12px;cursor:pointer;font-size:11px;'>▶</button>
    </div>
  </div>`
}).mount('#car-out');