함수 설정(box){
var track=box.querySelector('.pd-shots')||box.querySelector('.pd-track');
만약 (track이 아니면) null을 반환합니다.
var figs=[];
변수 i;
for(i=0;i 트랙의 자식들[i]에 태그 이름이 'FIGURE'이고, 'data-pd-clone' 속성을 가진 태그가 !인 경우, figs.push(track.children[i])를 실행합니다.
}
var n=figs.length;
if(2>n)는 null을 반환합니다.
만약 track.getAttribute('data-pd-ready')가 아니라면,
var last=figs[n-1].cloneNode(true);
var first=figs[0].cloneNode(true);
last.setAttribute('data-pd-clone','1');
first.setAttribute('data-pd-clone','1');
last.setAttribute('aria-hidden','true');
first.setAttribute('aria-hidden','true');
track.insertBefore(last, figs[0]);
track.appendChild(first);
track.setAttribute('data-pd-ready','1');
}
변수 인덱스=1;
var countEl=box.querySelector('.pd-count');
var dots=box.querySelectorAll('.pd-dots button');
var isShots=track.className.indexOf('pd-shots')!==-1;
var nav=box.querySelector('.pd-nav');
var drag=null;
함수 live(){
만약 (isShots이 아니면) true를 반환합니다.
nav가 아니면 false를 반환합니다.
return window.getComputedStyle(nav).display!=='none';
}
function width(){ return track.clientWidth||1; }
함수 logical(){
var v=index-1;
if(0>v) v=n-1;
만약(v>=n)이면 v=0;
v를 반환합니다.
}
함수 paint(animate){
track.style.transition=animate?'transform .32s ease':'none';
track.style.transform='translate3d('+(-index*width())+'px,0,0)';
}
함수 show(){
var v=logical();
if(countEl) countEl.textContent=(v+1)+' / '+n;
for(var d=0;d }
함수 모드(){
var on=live();
var kids=track.children;
변수 k;
for(k=0;k 만약(!on){
키즈[k].스타일.플렉스='';
아이들[k].style.width='';
kids[k].style.minWidth='';
만약 kids[k].getAttribute('data-pd-clone')이면 kids[k].style.display='none';
}또 다른{
키즈[k].스타일.디스플레이='';
kids[k].style.flex='0 0 100%';
키즈[k].스타일.폭='100%';
kids[k].style.minWidth='0';
kids[k].style.maxWidth='100%';
}
}
var view=track.parentNode;
if(view && view.className.indexOf('pd-viewport')!==-1){
view.style.touchAction='pan-y';
if(on) view.style.overflow='hidden';
그렇지 않고 (isShots인 경우) view.style.overflow='visible'로 설정합니다.
}
만약(!on){
트랙 스타일 변환='없음';
트랙 스타일 전환='없음';
반품;
}
트랙스타일.오버플로우='보이는';
트랙.스타일.터치액션='pan-y';
track.style.scrollSnapType='none';
페인트(false);
보여주다();
}
함수 settle(){
if(index<1){ index=n; paint(false); }
그렇지 않고 인덱스가 n보다 크면 인덱스를 1로 설정하고 페인트(false)를 지정합니다.
}
track.addEventListener('transitionend', function(e){
e.target이 track과 다르거나 e.propertyName이 'transform'이 아니면 return;
해결하다();
보여주다();
});
window.addEventListener('크기 조정', 모드);
방법();
반품 {
트랙:트랙,
시작:함수(e){
만약 live()가 1이 아니고, e.touches가 1이 아니고, e.touches의 길이가 1이 아니면, return;
해결하다();
drag={x:e.touches[0].clientX,y:e.touches[0].clientY,dx:0,dy:0,lock:''};
트랙 스타일 전환='없음';
},
이동:함수(e){
드래그가 1이 아니거나, e가 터치하지 않았거나, e의 터치 길이가 1이 아니면 반환됩니다.
drag.dx=e.touches[0].clientX-drag.x;
drag.dy=e.touches[0].clientY-drag.y;
드래그가 잠겨 있지 않다면
만약 10이 Math.abs(drag.dx)보다 크고 10이 Math.abs(drag.dy)보다 크다면, 반환하세요.
drag.lock=Math.abs(drag.dx)>Math.abs(drag.dy)?'x':'y';
}
드래그 잠금이 'x'가 아니면 반환됩니다.
e.cancelable이면 e.preventDefault();
track.style.transform='translate3d('+(-index*width()+drag.dx)+'px,0,0)';
},
끝:함수(){
드래그하지 않으면 반환됩니다.
var dx=drag.dx;
var lock=drag.lock;
드래그=null;
만약 잠금이 'x'가 아니면, 페인트(true)를 입력하고, 반환(return)을 사용하세요.
var 제한=Math.min(48, 너비()*0.18);
if(dx<=-limit) index+=1;
그렇지 않고 dx가 limit보다 크거나 같으면 인덱스가 1이 됩니다.
페인트(true);
보여주다();
루트.pdSkip=1;
window.setTimeout(function(){ root.pdSkip=0; }, 450);
},
cancel:function(){ drag=null; paint(true); },
클릭:function(e){
루트의 pdSkip 값이 0이면 루트의 pdSkip 값을 0으로 설정하고, 그 다음 값을 반환합니다.
var btn=e.target && e.target.closest ? e.target.closest('button') : null;
만약 btn이 아니거나, box.contains(btn)이 아니거나, live()가 아니면 return;
e.preventDefault();
if(btn.className.indexOf('pd-prev')!==-1) index-=1;
그렇지 않으면 btn.className.indexOf('pd-next')가 -1이 아닌 경우 index+=1이 됩니다.
그렇지 않고 btn.parentNode가 'pd-dots' 클래스의 인덱스가 -1이 아니면 {
var buttons=btn.parentNode.querySelectorAll('button');
for(var b=0;b 그렇지 않으면 반환;
페인트(true);
보여주다();
}
};
}
var controls=[];
var boxes=root.querySelectorAll('[data-pd]');
for(var n=0;n var api=setup(boxes[n]);
if(api) controls.push(api);
}
함수 소유자(e){
var 노드=e && e.target;
만약 노드가 가장 가깝지 않거나 노드의 위치가 가장 가깝지 않으면 null을 반환합니다.
var box=node.closest('[data-pd]');
만약 (box가 아닌 경우) null을 반환합니다.
for(var i=0;i null을 반환합니다.
}
var active=null;
반품 {
시작: 함수(e){ active=owner(e); if(active) active.start(e); },
이동: 함수(e){ if(활성화됨) active.move(e); },
end:function(){ if(active) active.end(); active=null; },
cancel:function(){ if(active) active.cancel(); active=null; },
click:function(e){ var item=owner(e); if(item) item.click(e); }
};
})(이것);
if(event && event.touches) this.pdApi.start(event);" ontouchmove="if(this.pdApi)this.pdApi.move(event);" ontouchend="if(this.pdApi)this.pdApi.end(event);" ontouchcancel="if(this.pdApi)this.pdApi.cancel(event);" onclick="if(!this.pdApi){this.pdApi=this.pdApi||(function(root){
함수 설정(box){
var track=box.querySelector('.pd-shots')||box.querySelector('.pd-track');
만약 (track이 아니면) null을 반환합니다.
var figs=[];
변수 i;
for(i=0;i 트랙의 자식들[i]에 태그 이름이 'FIGURE'이고, 'data-pd-clone' 속성을 가진 태그가 !인 경우, figs.push(track.children[i])를 실행합니다.
}
var n=figs.length;
if(2>n)는 null을 반환합니다.
만약 track.getAttribute('data-pd-ready')가 아니라면,
var last=figs[n-1].cloneNode(true);
var first=figs[0].cloneNode(true);
last.setAttribute('data-pd-clone','1');
first.setAttribute('data-pd-clone','1');
last.setAttribute('aria-hidden','true');
first.setAttribute('aria-hidden','true');
track.insertBefore(last, figs[0]);
track.appendChild(first);
track.setAttribute('data-pd-ready','1');
}
변수 인덱스=1;
var countEl=box.querySelector('.pd-count');
var dots=box.querySelectorAll('.pd-dots button');
var isShots=track.className.indexOf('pd-shots')!==-1;
var nav=box.querySelector('.pd-nav');
var drag=null;
함수 live(){
만약 (isShots이 아니면) true를 반환합니다.
nav가 아니면 false를 반환합니다.
return window.getComputedStyle(nav).display!=='none';
}
function width(){ return track.clientWidth||1; }
함수 logical(){
var v=index-1;
if(0>v) v=n-1;
만약(v>=n)이면 v=0;
v를 반환합니다.
}
함수 paint(animate){
track.style.transition=animate?'transform .32s ease':'none';
track.style.transform='translate3d('+(-index*width())+'px,0,0)';
}
함수 show(){
var v=logical();
if(countEl) countEl.textContent=(v+1)+' / '+n;
for(var d=0;d }
함수 모드(){
var on=live();
var kids=track.children;
변수 k;
for(k=0;k 만약(!on){
키즈[k].스타일.플렉스='';
아이들[k].style.width='';
kids[k].style.minWidth='';
만약 kids[k].getAttribute('data-pd-clone')이면 kids[k].style.display='none';
}또 다른{
키즈[k].스타일.디스플레이='';
kids[k].style.flex='0 0 100%';
키즈[k].스타일.폭='100%';
kids[k].style.minWidth='0';
kids[k].style.maxWidth='100%';
}
}
var view=track.parentNode;
if(view && view.className.indexOf('pd-viewport')!==-1){
view.style.touchAction='pan-y';
if(on) view.style.overflow='hidden';
그렇지 않고 (isShots인 경우) view.style.overflow='visible'로 설정합니다.
}
만약(!on){
트랙 스타일 변환='없음';
트랙 스타일 전환='없음';
반품;
}
트랙스타일.오버플로우='보이는';
트랙.스타일.터치액션='pan-y';
track.style.scrollSnapType='none';
페인트(false);
보여주다();
}
함수 settle(){
if(index<1){ index=n; paint(false); }
그렇지 않고 인덱스가 n보다 크면 인덱스를 1로 설정하고 페인트(false)를 지정합니다.
}
track.addEventListener('transitionend', function(e){
e.target이 track과 다르거나 e.propertyName이 'transform'이 아니면 return;
해결하다();
보여주다();
});
window.addEventListener('크기 조정', 모드);
방법();
반품 {
트랙:트랙,
시작:함수(e){
만약 live()가 1이 아니고, e.touches가 1이 아니고, e.touches의 길이가 1이 아니면, return;
해결하다();
drag={x:e.touches[0].clientX,y:e.touches[0].clientY,dx:0,dy:0,lock:''};
트랙 스타일 전환='없음';
},
이동:함수(e){
드래그가 1이 아니거나, e가 터치하지 않았거나, e의 터치 길이가 1이 아니면 반환됩니다.
drag.dx=e.touches[0].clientX-drag.x;
drag.dy=e.touches[0].clientY-drag.y;
드래그가 잠겨 있지 않다면
만약 10이 Math.abs(drag.dx)보다 크고 10이 Math.abs(drag.dy)보다 크다면, 반환하세요.
drag.lock=Math.abs(drag.dx)>Math.abs(drag.dy)?'x':'y';
}
드래그 잠금이 'x'가 아니면 반환됩니다.
e.cancelable이면 e.preventDefault();
track.style.transform='translate3d('+(-index*width()+drag.dx)+'px,0,0)';
},
끝:함수(){
드래그하지 않으면 반환됩니다.
var dx=drag.dx;
var lock=drag.lock;
드래그=null;
만약 잠금이 'x'가 아니면, 페인트(true)를 입력하고, 반환(return)을 사용하세요.
var 제한=Math.min(48, 너비()*0.18);
if(dx<=-limit) index+=1;
그렇지 않고 dx가 limit보다 크거나 같으면 인덱스가 1이 됩니다.
페인트(true);
보여주다();
루트.pdSkip=1;
window.setTimeout(function(){ root.pdSkip=0; }, 450);
},
cancel:function(){ drag=null; paint(true); },
클릭:function(e){
루트의 pdSkip 값이 0이면 루트의 pdSkip 값을 0으로 설정하고, 그 다음 값을 반환합니다.
var btn=e.target && e.target.closest ? e.target.closest('button') : null;
만약 btn이 아니거나, box.contains(btn)이 아니거나, live()가 아니면 return;
e.preventDefault();
if(btn.className.indexOf('pd-prev')!==-1) index-=1;
그렇지 않으면 btn.className.indexOf('pd-next')가 -1이 아닌 경우 index+=1이 됩니다.
그렇지 않고 btn.parentNode가 'pd-dots' 클래스의 인덱스가 -1이 아니면 {
var buttons=btn.parentNode.querySelectorAll('button');
for(var b=0;b 그렇지 않으면 반환;
페인트(true);
보여주다();
}
};
}
var controls=[];
var boxes=root.querySelectorAll('[data-pd]');
for(var n=0;n var api=setup(boxes[n]);
if(api) controls.push(api);
}
함수 소유자(e){
var 노드=e && e.target;
만약 노드가 가장 가깝지 않거나 노드의 위치가 가장 가깝지 않으면 null을 반환합니다.
var box=node.closest('[data-pd]');
만약 (box가 아닌 경우) null을 반환합니다.
for(var i=0;i null을 반환합니다.
}
var active=null;
반품 {
시작: 함수(e){ active=owner(e); if(active) active.start(e); },
이동: 함수(e){ if(활성화됨) active.move(e); },
end:function(){ if(active) active.end(); active=null; },
cancel:function(){ if(active) active.cancel(); active=null; },
click:function(e){ var item=owner(e); if(item) item.click(e); }
};
})(이것);
if(event && event.touches) this.pdApi.start(event);}if(this.pdApi &&event)this.pdApi.click(event);">
테이블 위에
뚜껑이 있는 타원형 나무 상자
뚜껑은 타원형 본체 위에 얹혀 있습니다. 사진 속 책은 스타일링 예시이며, 마감 및 크기는 선택하신 옵션에 따라 달라집니다.
세부 사항
나무결, 뚜껑 테두리, 장부맞춤
뚜껑에는 나뭇결이 세로로 나 있다. 손가락으로 뚜껑을 들어 올릴 수 있는 테두리가 있고, 모서리는 장부맞춤 방식으로 제작되었다.
이미지에 사용된 스타일은 각 제품의 실제 사진입니다. 사이즈 정보는 제품 옵션에 명시되어 있습니다.
재료
목재
형태
타원형 나무 셰이커 박스
옵션
마감 및 크기는 선택하신 옵션에 따라 달라집니다.
포함됨
상자만
소비자 평가
0
0개의 리뷰 기준
0
0%
0
0%
0
0%
0
0%
0
0%
아직 리뷰가 없습니다. 이 제품에 대한 첫 리뷰를 남겨보세요.
A considered combination
Let texture connect the details.
Start with one material you love. Pair smooth glass or metal with a softer textile, or echo a warm finish through a room and the accessories you choose.
Let lighting set the mood, furniture give the room its shape and decorative accents bring the layers together. Repeat a finish or a colour to connect the space.
Your email addressSubscribePlease enter a valid email address.Submitting…You are subscribed.This email is already subscribed.We could not complete your subscription. Please try again.Code copied.The code could not be copied. Please select and copy it.Amber glass lighting, plum silk and warm architectural shadows
This website uses cookies. By continuing, you agree to the use of cookies. Privacy Policy
승인
거부
장바구니
TRUSTED STORE
This store has earned the following certifications.
