一度に2枚のスライドショーを表示するスライドショー

Question

透明度を使ってスライドショーを作成しようとしましたが、問題は4枚目と4枚目の画像が1枚目に変化したときに1枚目の画像が何らかの形で早期に表示され、 。別の問題は、4番目、4番目の画像で3番目の画像を変更しても、他のすべての画像と同じように空き領域ができない場合です（解像度が悪い場合は表示されないことがあります）。この問題は、4つ以上の画像を追加したときにも、常に最後の画像にのみ発生します。どのようにそれを修正するための提案と私は間違って何ですか？

var slides = document.querySelectorAll('.imageSlide'); 
 
var currentSlide = 0; 
 
var slideInterval = setInterval(nextSlide, 2000); 
 

 
function nextSlide() { 
 
    slides[currentSlide].className = "imageSlide"; 
 
    currentSlide = (currentSlide + 1) % slides.length; 
 
    slides[currentSlide].className = "imageSlide showing"; 
 
}

* { 
 
    box-sizing: border-box 
 
} 
 

 
body { 
 
    font-family: Verdana, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.imageSlide-container { 
 
    position: relative; 
 
    margin: auto; 
 
} 
 

 
.imageSlide { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    z-index: 1; 
 
    -webkit-transition: opacity 1.0s; 
 
    -moz-transition: opacity 1.0s; 
 
    -o-transition: opacity 1.0s; 
 
    transition: opacity 1.0s; 
 
} 
 

 
.showing { 
 
    position: static; 
 
    opacity: 1; 
 
    z-index: 2; 
 
    transform: translateZ(0); 
 
} 
 

 
.prev, 
 
.next { 
 
    position: absolute; 
 
    top: 50%; 
 
    z-index: 3; 
 
    width: auto; 
 
    cursor: pointer; 
 
    margin-top: -22px; 
 
    padding: 15px; 
 
    color: red; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 

 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8) 
 
} 
 

 
@media only screen and (max-width: 300px) { 
 
    .prev, 
 
    .next, 
 
    .text { 
 
    font-size: 11px 
 
    } 
 
}

<div class="imageSlide-container"> 
 
    <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> 
 

 
    <span class="prev" onclick="plusSlide-button(-1)">&#10094;</span> 
 
    <span class="next" onclick="plusSlide-button(1)">&#10095;</span> 
 
</div> 
 
<a>test text</a> 
 
<a>test text</a> 
 
<a>test text</a>

Answer 1

問題は一つのアイテムのためにposition: absoluteとposition: staticを使用することです。あなたはこの奇妙な振る舞いを得る理由です

.container { 
 
    position: relative; 
 
} 
 

 
.item { 
 
    position: absolute; 
 
} 
 

 
.showing { 
 
    position: static; 
 
    border: 1px solid; 
 
}

<div class="container"> 
 
    <div class="item showing">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
</div>

。すべての商品は一番上にある必要があります。それぞれ

.item { 
    position: absolute; 
    top: 0; 
} 

.imageSlide { 
    position: absolute; 
    top: 0; 
    ... 
}