함수 설정(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%
아직 리뷰가 없습니다. 이 제품에 대한 첫 리뷰를 남겨보세요.
ROOM INSPIRATION
Bring the whole corner together.
Start with the way you use a space. For a reading corner, bring a light close to the seat, keep an everyday surface within reach and add one quiet decorative detail.
Explore the surrounding pieces in Home Decor to build a setting that feels like yours.
Compare the dimensions of your selected option with the place it will be used. Check nearby furniture, doors and everyday movement. For lighting, also check the fitting and electrical requirements stated on the product page.
What should I check about materials and care?
Use the material and care information for the exact item and option you select. A finish in a styled room is inspiration; it does not establish the material of another product. If the detail you need is missing, send us the product link before choosing.
How can I connect the different categories?
Begin with one everyday activity. Pair lighting with furniture and a decorative detail for reading; bring tableware and tabletop accents together for dining; use bedding and a bedside light to shape a quieter evening. Choose each item for its own listed size and purpose.
Need help with an item or an order?
Send the product link, selected option and the question you would like to clarify through Contact Us. For an order question, include your order number. Read the Shipping Policy for delivery information.
