diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..4a1aa310
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index e70983a3..e69de29b 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +0,0 @@
-# javascript-amazon
-레벨3
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 00000000..927cc41e
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..1a32a32a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..5755226a
--- /dev/null
+++ b/index.js
@@ -0,0 +1,71 @@
+class Carousel {
+ constructor (menuData,contentData) {
+ this.menuData=menuData;
+ this.contentData=contentData;
+ this.makingMenuList();
+ this.makingSlider();
+ this.btnHandler();
+ this.count = 0;
+ }
+ changeLocation (element,index) {
+ this.count = index;
+ const width = element.children[0].getBoundingClientRect().width;
+ element.style.transform = `translateX(${-this.count*width}px)`;
+ }
+ scaleMenu (element,index) {
+ this.count = index;
+ Array.from(element.parentNode.children).forEach((element)=>element.style.transform=`scale(0.99)`)
+ element.parentNode.children[this.count].style.transform = 'scale(1.1)';
+ }
+ btnHandler () {
+ const left =document.querySelector('div.carousel__button--prev');
+ const right =document.querySelector('div.carousel__button--next');
+ [left,right].forEach((btn,index)=>{
+ btn.addEventListener('click',()=>{
+ index === 0 ? this.count-- : this.count++;
+ if (this.count >3) this.count =0;
+ if (this.count<0) this.count =3;
+ const el = document.querySelector('.carousel__container');
+ this.changeLocation(el,this.count);
+ this.scaleMenu(document.querySelector('.menu__list>li'),this.count);
+ });
+ })
+ }
+ makingMenuList () {
+ const menuConatiner=document.querySelector('.menu__list')
+ this.menuData.forEach((data)=>{
+ menuConatiner.innerHTML +=`
+ ${data}`
+ })
+ Array.from(menuConatiner.children).forEach((li,index)=>{
+ li.addEventListener('click',()=>{
+ this.scaleMenu(li,index);
+ this.changeLocation(document.querySelector('.carousel__container'),index);
+ })
+ })
+ }
+ makingSlider () {
+ const carouselContainer = document.querySelector('.carousel__container');
+ carouselContainer.innerHTML=this.contentData.map((data,index)=>`
+
+
+
+ ${data.title}
+ ${data.desc.map((desc)=>`- ${desc}
`).join('')}
+
+
+
+
+
+