如何隐藏幻灯片上的溢出而不隐藏箭头？

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; 
}