pc.모바일별 배너를 다르게 할 수 있을까요?
본문
그누보드를 사용하지 않고 만든 페이지가 있는데
owl를 이용해서 배너 슬라이더를 돌리고 있고
관리자 페이지에서 배너를 등록할 수 있습니다.
관리자가 배너를 pc와 모바일 따로 저장할 수 있고요.
그런데 1000px을 기준으로 이상이면 pc버전
이하면 모바일 버전 배너를 슬라이더 효과를 주고 싶습니다.
어떤 방법이 있을까요?
owl를 통해 해결할 수가 있나요? 나이면 php를 수정해야 하나요?
답변 2
> 1000px을 기준으로 이상이면 pc버전
> 이하면 모바일 버전 배너를 슬라이더 효과를 주고 싶습니다.
요렇게 언급을 하셨는데요..요런경우 css미디어쿼리를 사용하여서 1000px기준으로 작업을 하시면될꺼 같은데요. 관리자에서 피시와 모바일을 배너를 따로 지정하여 올릴수 있다고 하면 피시와 모바일과 배너를 나누고자 하시는건지요? 혹시 나 그런경우 구지 css미디어 쿼리를 사용하지마시고 php쪽에서 모바일 디비이스클 체크 하시어. 모바일 베너를 돌리면될꺼 같습니다.
php 에서
$MOBILE_AGENT ="'/phone|samsung|lgtel|mobile|[^A]skt|nokia|blackberry|BB10|android|sony/";
$is_mobile = preg_match('/'.$MOBILE_AGENT.'/i', $_SERVER['HTTP_USER_AGENT']);
if($is_mobile == true) { // 모바일경우
// 여기다 처리하고 싶은 배너를 넣으세요.. (모바일 배너)
} else { // 피시일경우
// 여기다 처리하고 싶은 배너를 넣으세요.. (피시 배너)
}
대략적으로 php에서는 모바일이경우 대략적으로 요런식을 처리하시면 될꺼 같습니다.
PC 버전의 슬라이드와 모바일 버전의 슬라이드를 두개다 띄우고
css 미디어 쿼리로 1000px 기준으로 pc슬라이더와 모바일 슬라이더를 숨기처리하고 보여주고 하면 됩니다.
반대로 스크립트에서도 창 가로폭을 계산해서 해당하는 owl 슬라이드를 초기화 해서 실행 해주시면 되구요.
반응형일 경우 슬라이드 초기화 하고 실행하는 부분을 window resize 이벤트에도 추가해서 적용하면
반응형에서도 사용가능합니다.