통합검색

Javascript

[jQuery] bxslider 반응형에서 개수 다르게 노출하기

  • 2022.04.15 14:36:01


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();
});


 
리스트