/slider

vanilla-js-slider

Primary LanguageCSS

slider

vanilla-js-slider.mov

๐Ÿ’Ž ๊ธฐ๋ณธ ๊ตฌํ˜„

  • ์œ ์ €๋Š” ์ด๋ฏธ์ง€ ์Šฌ๋ผ์ด๋“œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์Šฌ๋ผ์ด๋“œ๋Š” 2์ดˆ์— ํ•œ ๋ฒˆ์”ฉ ์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ ๋ฐฉํ–ฅ์œผ๋กœ ์Šฌ๋ผ์ด๋“œ ํ•œ๋‹ค.
  • ์™ผ์ชฝ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์Šฌ๋ผ์ด๋“œ๋Š” ์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ์œผ๋กœ ์ด๋™ํ•œ๋‹ค.
  • ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์Šฌ๋ผ์ด๋“œ๋Š” ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ด๋™ํ•œ๋‹ค.
  • ์Šฌ๋ผ์ด๋“œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น ์œ„์น˜์˜ ์Šฌ๋ผ์ด๋“œ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚œ๋‹ค.
  • ์ผ์‹œ์ •์ง€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด autoplay ๊ฐ€ ๋ฉˆ์ถ”๊ณ  ์žฌ์ƒ ๋ฒ„ํŠผ์œผ๋กœ ๋ฐ”๋€๋‹ค.
  • ์žฌ์ƒ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด autoplay ๊ฐ€ ์‹œ์ž‘๋˜๊ณ  ์ผ์‹œ์ •์ง€ ๋ฒ„ํŠผ์œผ๋กœ ๋ฐ”๋€๋‹ค.
  • ์Šฌ๋ผ์ด๋“œ์˜ ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์— ๋‹ฟ์œผ๋ฉด ๋งจ ์ฒ˜์Œ ์Šฌ๋ผ์ด๋“œ๋กœ ์ด๋™ํ•œ๋‹ค.

๐Ÿ’Ž ์ถ”๊ฐ€ ๊ตฌํ˜„

  • ์Šฌ๋ผ์ด๋“œ์˜ ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์— ๋‹ฟ์œผ๋ฉด ๋งจ ์ฒ˜์Œ ์Šฌ๋ผ์ด๋“œ๋กœ ์ด๋™ํ•˜๋Š”๋ฐ, ๋ฌดํ•œ์œผ๋กœ ๋ณด์ด๊ฒŒ๋” ๋งŒ๋“ ๋‹ค.