画像スライダーで「無限ループ（両端でシームレスに循環）」を実現する定番テクニックはどれですか？
- 一番左の画像をposition: fixedにする
- 最初と最後のスライドをクローンして両端に挿入する
- z-indexを最大にする
- opacityだけを切り替える
正解
- 最初と最後のスライドをクローンして両端に挿入する
解説
先頭と末尾のスライドをクローンして前後に配置し、移動端でインデックスを瞬時にリセットすることで「途切れない」見た目を作ります。
使用例（サンプルコード）
[ html ]
<div class="track" id="track" style="display:flex;overflow:hidden;width:300px;"></div>
<button id="prev">Prev</button><button id="next">Next</button>
<script>
const imgs = ['1.jpg','2.jpg','3.jpg'];
const track = document.getElementById('track');
const slides = [imgs[imgs.length-1], ...imgs, imgs[0]];
slides.forEach(src=>{
const img = document.createElement('img'); img.src = src; img.style.width='300px';
track.appendChild(img);
});
let idx = 1; // 実スライドの先頭
track.style.transform = `translateX(${-300*idx}px)`;
function go(delta){
idx += delta;
track.style.transition = 'transform .3s';
track.style.transform = `translateX(${-300*idx}px)`;
track.addEventListener('transitionend', function onEnd(){
if (idx === slides.length-1){ idx = 1; track.style.transition='none'; track.style.transform=`translateX(${-300*idx}px)`; }
if (idx === 0){ idx = slides.length-2; track.style.transition='none'; track.style.transform=`translateX(${-300*idx}px)`; }
track.removeEventListener('transitionend', onEnd);
});
}
document.getElementById('prev').onclick = ()=>go(-1);
document.getElementById('next').onclick = ()=>go(1);
</script>