swiper 슬라이더
본문
안녕하세요
swiper 슬라이더 작업을 하고 있는데요,
pc화면에서 다음과 같은 이미지로 나열만 해놓고, 모바일화면에서는 1개만 보이고 슬라이드 시키려고 합니다.
그래서 pc에서는 touchRatio: 0,으로 해놓고
그 외 옵션을
slidesPerView: 3,
slidesPerColumn: 2,
추가 했습니다.
3개 2개로는 나오는데 2번째 중 2개가 가운데가 아닌 왼쪽정렬로 됩니다 ㅠ
밑에 컨텐츠 두개를 가운데로 할 수 있는 방법이 있을까요? ㅠㅠ
답변 4
css 상에서 margin:0 auto; 나 text-align:center; 등을 활용해보세요
댓글 감사합니다!
swiper-wrapper이나 다른 부모에 센터될만한 값을 넣으면
두 컨텐츠가 이동은 하지만 그러면 옆에 있던 컨텐츠가 반이 또 보입니다 ㅠㅠ
swiper 로는 깔끔하게 저 레이아웃(?)이 안나오는가봐요 ..
댓글 감사합니다!
모바일일때 1개로 변경하는건 했는데
PC버전에서 5개가 3개 2개로 나열이 안됩니다ㅠ
centeredSlides: true,
| breakpoints: { | |
| 640: { | |
| slidesPerView: 2, | |
| spaceBetween: 20, | |
| }, |
}
breakpoints 를 사용하셔서 나눠주시면 될것 같습니다.
댓글 감사합니다!
모바일일때 1개로 변경하는건 했는데,
PC버전에서의 컨텐츠 나열이 3개 2개가 가운데 정렬이 안됩니다 ㅠ
centeredSlides: true, 이걸 사용하면 3개 3개가 나와버려요..
pc일때 1개의 슬라이드 width를 20%로 줄여주시면 될거같아요
답변을 작성하시기 전에 로그인 해주세요.
