함수 설정(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);">
테이블 위에
테이블이나 선반에 놓을 수 있는 손잡이가 달린 바구니
손잡이는 명시된 스타일 구성에 포함됩니다. 사진 속 물건들은 스타일링을 위한 소품일 뿐입니다.
세부 사항
직조된 벽, 감싸진 테두리, 마감 처리된 이음새
벽면은 촘촘한 격자무늬입니다. 테두리는 감싸져 있고, 손잡이나 모서리 부분도 같은 짜임새로 마감되어 있습니다.
