Swiper

https://swiperjs.com/get-started

=> Demos에 가서 -> (우린 script니까 core 하면됨)


=> ctrl+a 해서 싹다 가져옴

getstarted

외부 스타일시트로 가져오기

=> 이거 복사해서 min만 없애면 css 외부 파일처럼 뜸 -> 가져오기

🙋‍♀️ 저는 .... 필요한 부분만 수정이 필요해여!

해답① : 외부 css 파일로 갖다쓸때,

=> 개발자 도구 열어서 직접 보고 건드리기!

ex.

height 건드리고싶으면 -> (플젝에서는 보통 height 100% 안씀)
해답 : id=wrap으로 감싸서 조정,


-> 내가 더 div요소들 추가해서 안에 넣어버림

해답②

• 타고타고보니까 최종 부모도 100% -> 분명 css/js에서 얘를 건드리는 요소가 있단 뜻(부모가 있어야 100% 적용이 되므로, + body 100%면 먹음~)
  
  -> swiper를 아예 원하는 px로 잡아버림.
  -> 문제 : .swiper와 비슷한 포맷인 애들도 전부 500px로 바뀔 수 있음
  
  -> 즉 차라리, 가장 부모에 class 추가하는게 더 똑똑한 해답

여러가지 슬라이드를 적용할때

-> 분명 비슷한 포맷을쓰니까 class이름 다 겹칠것임(뭐 하나씩 이상하게 돌아감, script단에서 망할 경우 多)

• 해법? var말고 let을 바꾼다음에
  

modules

-> 이런식으로 script에 적용되고 있는거 보면, autoplay..등등은 얘네가 적용하고있는 api임.

• ex. spaceBetween은 type이 number고 기본값은 0이고 옆의 설명은 : 이럴때 쓰란 말(spaceBetween: 이미지 사이의 마진)
• autoplay : 진이이이인짜 많이 쓰임
  
  -> 요게 기본 포맷
  -> 설명 더 보면 속성들 많음(ex. pauseOnMouseEnter...)
  
  -> 요렇게 적용하면 된다!

-> 건드리고 싶으면 js파일(마찬가지로 min 없애고 복붙하면 됨) : 하나씩 method 건드려보자!

✨버튼 무한히 돌게하고싶다!

• speed속성(순서 상관없다)
• loop(반복해서 돌아가는거, 마지막 슬라이드배너 끝난 다음에도 첫번째 슬라이드로 돌아가게)
  

FadeEffect등 속성들!

• 홈페이지에 있는 설명처럼 그대로 적용하면 됨
  ('coverflow', 'cube','fade','flip',기본이 'slide')

-> 기본값이 false, true하면 클릭가넝~

• type의 기본값: 'bullets'
  

✔ 항상 맨 왼쪽기준

• direction 기본값 : 'horizental' / vertical

3개 슬라이드 반응형

• 혹시 3개있는 슬라이드 반응형으로 바꾸고싶다면 ?
  -> 차라리 display none 해두고 2개짜리 swiper 이용하거나... 이런식으로 고려해보기

🙋‍♀️인디케이터등 디자인 조절하고싶다!

-> f12 개발자도구로 찾은다음에 , 개를 내부 css로 걸던지, css에 추가로 넣던지해서(밑에 있는 코드가 먹기때문에!) 바꾸면 됨!!(원래 있는 코드 자체를 건드리는건 위험)

js 건드리기(동적으로 넣고싶은 경우~)

https://dzzienki.tistory.com/77
-> 참고~(appendChild쓰고싶은경우)