如何隱藏幻燈片上的溢出而不隱藏箭頭？

Question

我想隱藏溢出來隱藏幻燈片中的第二個圖像（如果我不這樣做，會在我的網站底部創建額外的空間），但是當我這樣做時，它也會隱藏下一個箭頭和上一個箭頭。 ..我如何分開它們並保持箭頭位置正確？

我該如何讓它們響應，讓我們說使用百分比的寬度，而不是錯位？對不起，很抱歉。

請幫忙！ 謝謝。

這是幻燈片代碼： HTML

<div class="diy-slideshow"> 
<figure class="show"> <img src="img/image1.jpg" width="100%" /></figure> 
<figure><img src="img/image2.jpg" width="100%" /></figure> 
<span class="prev"><img src="prev.png" width="30px"/></span> <span class="next"> 
<img src="next.png" width="30px"/></span> 
</figure> 

CSS

.diy-slideshow { 
position: relative; 
display: block; 
overflow: visible; 
width: 90%; 
margin-left: 5%; 
margin-right: 5%; 
} 

figure{ 
position: absolute; 
opacity: 0; 
overflow: hidden; 
transition: 1s opacity; 
} 
figure.show{ 
opacity: 1; 
position: static; 
overflow: hidden; 
transition: 1s opacity; 
} 
.next, .prev{ 
color: #fff; 
position: absolute; 
top: 50%; 
z-index: 1; 
opacity: .5; 
user-select: none; 
} 
.next:hover, .prev:hover{ 
cursor: pointer; 
opacity: 1; 
} 
.next{ 
right: -4%; 
border-top-left-radius: 3px; 
border-bottom-left-radius: 3px; 
} 
.prev{ 
left: -4%; 
border-top-right-radius: 3px; 
border-bottom-right-radius: 3px; 
} 

的Javascript

<script language="JavaScript1.2"> 
(function(){ 

var counter = 0, 
$items = document.querySelectorAll('.diy-slideshow figure'), 
numItems = $items.length; 

var showCurrent = function(){ 
var itemToShow = Math.abs(counter%numItems); 

[].forEach.call($items, function(el){ 
el.classList.remove('show'); 
}); 

$items[itemToShow].classList.add('show'); 
}; 

document.querySelector('.next').addEventListener('click', function() { 
counter++; 
showCurrent(); 
}, false); 

document.querySelector('.prev').addEventListener('click', function() { 
counter--; 
showCurrent(); 
}, false); 

})(); 
</script> 

Answer 1

你爲什麼不只是添加這個可能

figure{ 
    /* your CSS */ 
    display:none; 
} 
figure.show{ 
    /* your CSS */ 
    display:block; 
} 

？

還是一個更好的解決方案（與動畫）只保留此：

figure{ 
    position: absolute; 
    opacity: 0; 
    transition: 1s opacity; 
} 
figure.show{ 
    opacity: 1; 
}