원하는 결과물은 이렇게 생긴 케러셀(=슬라이드)임.....
그래서 구현해보려구 열심히 만들고 있는데.... 진짜 도저히 몇시간동안 해봐도 안되어서 질문한다리...
html은 다음과 같고, 저기서 slider_list 안에 내가 js로 각 슬라이드 이미지를 넣어줬슴....
그리고 css를 이렇게 했구,
1. slider에 width 100%, margin 0 auto를 줘서 브라우저가 중앙으로 배치하게끔 하려구 했구
그리고 일단 각 이미지 사진 크기인 1090px을 저렇게 걸어줬어....
2. 그리고 이미지가 잘 스와이프 될 수 있게끔 저렇게 리스트 전체에 relative와 각 이미지에 absolute를 걸어주었고..(이건 내가 왜 안 되지 하면서 여러개에 다 적용한거라 원리 잘 모름,,,ㅠ)
그렇게 했더니 결과물이 가운데로 잘 들어오긴 하는데, 옆에 사진들이 안 나오고, 암튼 막 이상함.....ㅠ
보니까 slider에 width 1090으로 줘서 저런거같은데, 저걸 키우면 막 또 예상과 다르게 엄청 이상하게 나오구..
일단 처음 랜더링될때 맨 마지막 사진으로 위치가 지정 되었음...... 그래서 저게 멀까 하고 한번 위치를 바꿔주는데
이렇게 js로 style.left해서 바꿔주는데
막 이렇게 이상하게 움직임... ㅠ..................... 왜인지 진짜 한개도 모르겟음,,,,,
잔짜 저 부분 한 6시간동안 삽질했는ㄷ데 도저히 모르겠어서 물어봐,,,,,, ;ㅅ;......
일단 code샌드박스로 코드 전체 올리려고 했는데, 막 변수가 undefined 에러로 작동을 안해..
그래도 일단 code샌드박스로 전체코드 보여줄게!!!
https://codesandbox.io/s/silly-banach-bv7ry?file=/index.html
jsfiddle로는 작동하던데, 근데 이건 이미지를 못 올리긴 하지만... 그래도 이걸로 보는게 조을거같아 ㅠㅠ!
https://jsfiddle.net/mbcL8wdg/4/
긴 질문 읽어줘서 정말로 고마워!!!!! 혹시 어떤 이유로 안 되는건지 감이 온다면 부탁해 ㅠㅠ..
js피들 링크
https://jsfiddle.net/mbcL8wdg/4/
그래서 질문의 요지는, 내가 이미지 스와이프가 잘 되게끔 저렇게 각 el릉 position 지정해준다음 js로 left right로 위치 변경해주려고 햇어... 아마 position이랑 width 지정하는걸 잘못해서 그런거같은데... 잘 모르겟어ㅠ...
1600
질문 답해주면 비웃기 가능 안 해주면 비웃지마! ㅡ.ㅡ
https://codesandbox.io/s/intelligent-morning-2e2x8
이러면 할수이찌?ㅇㅅㅇ
헉 머야????? 어느부분이 바뀐거야???? 헉 ;ㅅ; ??????
너꺼보고 지금 뭐가 내꺼 css랑 바뀐건지 찾아보는중인데.... 머지????? 헉........???? 그리고 저거 초기값 위치 세팅 어떻게 햇어.......???????????????? 헉.............................. 머지?!
헉 우우... 흐흐흐 알앗어!! 찾아본다음 고치고 다시 댓달게!!!@ 흐흐흐르르르르 저거만 알면 내가 고칠수잇겟다리 ^~~~^/ 고맙다리!!!!!
css말고 js 봐야댐ㅇㅅㅇㅋㅋ
헐 찾앗다리!!!!!!!! style="left:${(id-2)*100}%" 와아아아!!!!!1