swiper 슬라이드 모바일에서 적용 궁금한 사항이 있습니다.
본문
swiper 슬라이드 사용에 궁금한 사항이 있어서 문의드립니다.
해당 슬라이드 사용시 여러가지 옵션이 있는데 태블릿/모바일에서는 allowTouchMove 옵션을 주려고 하는데 G5_IS_MOBILE()이나 is_mobile() 같은 부분으로 구분해서 구현이 가능할까요?
기본적으로는 breakpoints: 옵션으로 구분을 하는걸로 아는데 문제는 태블릿/모바일 크기가 워낙 다양해서 어떤 태블릿에서는 적용되고 어떤 태블릿에서는 적용이 안되어서 문제입니다.
아래는 일부 코드 입니다.
var swiper = new Swiper('.slide1', {
initialSlide: 6,
spaceBetween: 0,
speed: 1000,
mousewheel: true,
.......
breakpoints: {
320: {
allowTouchMove: true,
},
1600: {
allowTouchMove: false,
},
}
여기서 기본적으로는 breakpoints에서 1600 저 부분을 768또는 880 이렇게 하는데 태블릿으로 가로 버전으로 보았을시 문제가 되고 있습니다. 그래서 태블릿 가로로 보았을시도 생각해서 위와 같이 하였는데 1600은 PC나 노트북에서도 문제가 되는 크기라서 여기를 is_mobile 이나 이런걸로 구분 가능할지 궁금합니다.
답변 1
allowTouchMove: g5_is_mobile
조금더 자세히 알 수 있을까요?
allowTouchMove는 true 또는 false 밖에 없는걸로 알고 있습니다.
현재 반응형 디자인을 사용해서 config.php 에서 define('G5_USE_MOBILE', false); 이렇게 사용하고 있습니다.
allowTouchMove: g5_is_mobile
그래서 위와 같이 하면무조건 false로 적용되는듯 하고
allowTouchMove: is_mobile()
이렇게 적용하면 오류가 바로 나오고 있습니다.
하나는 변수라서 적용되나 false로 사용하고 있고 하나는 함수라서 오류를 나타내고 있는듯 합니다.
is_mobile() 이 부분으로 해야 할듯 한데 include를 시켜서 따로 사용해야 하는지 아니면 다른 방법으로 해야 하는지 궁금합니다.
head.sub.ph보시면 자바스크립트 변수 g5_is_mobile에 모바일접속여부사 bool로 들어갑니다. 이게 최초접속 한번에 결정되는거라 브라우저 크기에 따른 bool을 원하시면 다른방법을 써야합니다
답변감사합니다. 현재 반응형 홈페이지로 운영중이라 define('G5_USE_MOBILE', false); 으로 사용하고 있습니다. 그래서 allowTouchMove: g5_is_mobile 이 부분은 현재 저의 홈페이지내에서는 무조건 false로 값이 들어가고 있어서 다른 방법을 찾아보고 있습니다. 다른방법을 한 번 찾아보도록 하겠습니다.
