Cannot read property 'style' of undefined

var a = -1; 
var b = 3; 
console.log(a, "%", b, "=", a % b);

var slide = document.getElementById('slider_ul'); 
var slides = slide.querySelectorAll('li');   
var currentSlide = 0; 
 
function leftBtn() { 
   slides[currentSlide].style.display = 'none'; 
   currentSlide = (++currentSlide) % slides.length; 
   slides[currentSlide].style.display = ''; 
} 
 
function rightBtn() { 
   slides[currentSlide].style.display = 'none'; 
   currentSlide = (--currentSlide + slides.length) % slides.length; 
   slides[currentSlide].style.display = ''; 
}

<ul id="slider_ul"> 
<li>First</li> 
<li style="display:none">Second</li> 
<li style="display:none">Third</li> 
</ul> 
 
<button type="button" onclick="rightBtn()">Previous</button> 
<button type="button" onclick="leftBtn()">Next</button>