var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("Workshop");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" red", "");
}
x[slideIndex-1].style.display = "block";
}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
.btn,.button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.right-align{text-align:right!important}.justify{text-align:justify!important}.center{text-align:center!important}
.section,.code{margin-top:16px!important;margin-bottom:16px!important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.mySlides {display:none}
<!DOCTYPE html>
<html>
<body>
<div class="workshop_content">
<span class="mySlides">Текст 1</span>
<span class="mySlides">Текст 2</span>
<span class="mySlides">Текст 3</span>
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
</div>
</body>
</html>