「zim.js」 이미지 & 슬라이드 조합

 

 

zim.js 슬라이더 기능은 간편하게 이미지 크기를 조절할 수 있다.

위와 같은 이미지 슬라이더를 작성하기 위해서 복잡한 DOM구조를 사용할 필요가 없다. Frame(), Slider() 두개의 객체와 내부 옵션값 설정만으로 다양한 슬라이더 기능을 제작할 수 있다.

 

  const mainImg = frame.asset('https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/img%2Fdrugchild.jpg?alt=media&token=4ae9375c-9c91-4b83-b880-cc41ceea6dd7').center();
  
  let sliderOpt = { //슬라이더 옵션값
  		min:0,
		max:2.5,
		button: new Button({
			width:40,
			height:40,
			corner:20,
			label:' ',
			backgroundColor:'tomato',
			rollBackgroundColor:'lightGrey',
			gloss:0.3
		}).rot(90)
	} 

//슬라이더와 이미지 조합
	let slider = new Slider(sliderOpt)
				.pos(0,150,CENTER,BOTTOM)
				.change(()=>{
					mainImg.sca(slider.currentValue)
							.centerReg()
	})

 

위의 코드에서 핵심은 new Slider( )의 .change( )메서드다. change( )메서드는 콜벡형태로 이미지의 동작을 제어하는 코드를 받는다. 슬라이더 객체는 최소값(min), 최대값(max)을 설정할 수 있고, 버튼 속성에는 Button( )객체를 삽입할 수 있다. Slider관련 속성은 꽤 많은 편이기에 zim.js DOC에서 확인해보자.

 

https://zimjs.com/docs.html