-
- 로그인후 이용해주세요.
자유 게시판
2024.11.15 01:02
swiper 다중행의 반응형 처리,, 드디어 숙제를 풀었네요 ㅠㅠ
swiper 를 버리기에는 지금 리빌더에서 작동되는 목록들이 모두 swiper 를 사용하고 있기 때문에
그대로 사용할 수 밖에 없는 환경이었습니다..ㅠ
최신버전으로 업데이트를 한다해도 다중행이 breakpoint 를 이제 지원을 하지않아서 골치였네요..
틈틈히 테스트를 해본끝에.. 완벽하게 작동을 하는 코드를 만들게 되었습니다~
PC와 Mobile로 전환할때 갯수를 완벽하게 컨트롤 할 수 있네요 ㅠㅠ
오류로 볼 수 있기때문에.
2.1.6 으로 스와이퍼 개선 먼저 곧 배포해드릴 예정입니다~
<div data-pc-w="2" data-pc-h="2" data-mo-w="1" data-mo-h="4"> 이렇게 data- 값을 사용해서
PC > 2X2, Mobile > 1X4 가 완벽하게 작동을 하고있고
PC > 1X7, Mobile > 1X3 도 완벽합니다!
입력하는대로 보여지고 그룹화되서 슬라이드 되니 이것보다 더 좋을수가없네요 ㅎ
2X2 설정으로 출력이 8개라면 (페이징 2개)
------------
1,2 | 5,6
3,4 | 7,8
------------
1X4 설정으로 출력이 12개라면 (페이징 3개)
------------
1 | 5 | 9
2 | 6 | 10
3 | 7 | 11
4 | 8 | 12
------------
위와같은 형태로 정렬되어 그룹으로 슬라이드가 됩니다~
가로 1열 이상일때도 익숙하게 가로정렬로 볼 수 있고,
가로 1열 일때도 세로정렬로 볼 수 있습니다 ㅠ
그리고 swiper 를 실행하게 하는 스크립트는 이제 공통함수가 되서 고정으로 하나만 들어가게했고,
html 에서 data- 값으로 출력값과 가로세로 갯수를 설정할 수 있습니다!
물론 모듈설정과 연동 됩니다~
감사합니다~
- 이전글A~~C... ㅠ_ㅠ 비공개 테스트 검수 반려되었습니다.2024.11.15
- 다음글잠깐만요2024.11.14
댓글목록
