JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="kunder">
<li><span class="udtalelse">Indhold 1</span></li>
<li><span class="udtalelse">Indhold 2</span></li>
<li><span class="udtalelse">Indhold 3</span></li>
</ul>
<span class="kunderpagination">
<a href="#" id="prev">« Previous</a> |
<a href="#" id="next">Next »</a>
</span>
CSS
ul{
list-style-type: none;
}
.active{
display: inline;
}
.passiv{
display: none;
}
JavaScript
var all = $('.udtalelse').addClass("passiv");
var i = -1;
$('#prev').click(function() {
ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('#next').click(function() {
ctrlKunder( i = ++i % all.length );
}).click();
function ctrlKunder(ele) {
all.removeClass("active").addClass("passiv");
all.eq(ele).removeClass("passiv").addClass("active");
}