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

Question

I want to make the overflow hidden to hide the second image in the slideshow (which if I don't, creates extra space in the bottom of my website) however when I do this, it also hides the arrows next and prev...How do I separate them and still keep the arrows in the correct position?

And how do I make them responsive, let's say using percentage for width without it being misplaced? sorry long post.

Please help! Thank you.

This is the slideshow code: 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

Why don't you just add this maybe

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

?

Or a better solution (with your animation) only keep this :

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