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