SSG default style

SSG 사용하는 기본형

by HYEONGJINKIM

HTML

<div id="_main_banner">
  <div class="banner_img">
    <ul class="bn_blist">
      <li>
        <a href='/event/eventDetail.ssg?promId=1100200569' target='_self'><img src='http://static.ssgcdn.com/cmpt/banner/201702/2017020210323743351154330215_169.jpg' alt='쓱-배송 LIVE'></a>
      </li>
      <li>
        <a href='/event/eventDetail.ssg?promId=1100199918' target='_self'><img src='http://static.ssgcdn.com/cmpt/banner/201702/2017020117025509614440967444_425.jpg'></a>
      </li>
      <li>
        <a href='/event/eventDetail.ssg?promId=1100199654' target='_self'><img src='http://static.ssgcdn.com/cmpt/banner/201701/2017012518493756323975630497_600.jpg'></a>
      </li>
      <li>
        <a href='/event/eventDetail.ssg?promId=1100196731' target='_self'><img src='http://static.ssgcdn.com/cmpt/banner/201701/2017012616074009675680961668_917.jpg'></a>
      </li>
    </ul>
  </div>
  <div class="bn_brem direction">
    <a href="#" class="sp_rban prev">이전 배너 보기</a><a href="#" class="sp_rban next">다음 배너 보기</a>
  </div>
</div>

JavaScript

var emall = emall || {};
emall.View = emall.View || {};
emall.View.main = emall.View.main || {};

emall.View.main.slider = function() {
  this.init();
};

emall.View.main.slider.prototype = {
  init: function() {
    this._assignElements();
    this._attachEventHandlers();
  },
  _assignElements: function() {
    this._welMainBannerArea = $('#_main_banner');
    this._welMainBannerList = this._welMainBannerArea.find('.banner_img ul');
    this._welMainBannerItem = this._welMainBannerList.find('>li');
    this._welMainNav = this._welMainBannerArea.find('.direction');
  },
  _attachEventHandlers: function() {
    this._welMainNav.on('click', 'a.prev', $.proxy(this._onClickMovePrev, this));
    this._welMainNav.on('click', 'a.next', $.proxy(this._onClickMoveNext, this));
  },
  _onClickMovePrev: function() {
  	alert('MovePrev');
  },
  _onClickMoveNext: function(){  
  	alert('MoveNext');
  }
  //….
};

$(function() {
  var oEmallViewMainSlider = new emall.View.main.slider();
});