bxslider 플러그인을 사용하여 반응형 사이트를 구축하는 경우
PC 와 모바일에서 갯수가 다르게 보이도록 하는 예제.
아래 예제는
PC 에서는 4개의 이미지가,
모바일에서는 2개의 이미지가 노출되로록 한다.
bxrolling = {
'init' : function(){
this.action();
},
'action' : function(){
var $ele = {
'roll' : $('.roll'),
}
var opts = function(){
var vis = $('#_device_mo').is(':visible');
//PC인 경우
if(!vis){
var vars = {
'auto' : true,
'useCSS' : false,
'pager' : false,
'minSlides' : 4,
'maxSlides' : 4,
'slideMargin' : 10,
'slideWidth' : 290,
'moveSlides' : 1
}
//모바일인 경우
}else{
var vars = {
'auto' : true,
'useCSS' : false,
'pager' : false,
'minSlides' : 2,
'maxSlides' : 2,
'slideMargin' : 10,
'slideWidth' : 290,
'moveSlides' : 1
}
}
return vars;
}
var rolling = function(){
roll = $ele.roll.bxSlider(opts());
}
rolling();
$(window).on({
'load resize' : function(){
roll.reloadSlider(opts());
}
})
}
}
$(function(){
bxrolling.init();
});
[jQuery] file 인풋에 이미지 첨부시 썸네일 보여주기(Blob) (0) | 2021.08.09 |
---|---|
[jQuery] radio, checkbox 디자인 하기 (0) | 2021.08.09 |
[jQuery] bxslider 반응형에서 갯수 다르게 노출하기 (0) | 2021.08.09 |
[HTML] 파비콘(Favicon) 설정하기 (0) | 2021.08.09 |
[CSS] 반응형에서 유투브 동영상 비율 유지하여 삽입하기 (0) | 2021.08.09 |
[CSS] 아이폰(ios)에서 overflow 스크롤링 부드럽게 처리 (0) | 2021.08.09 |
댓글 영역