Making an iframe slideshow for webpages with jQuery - html

Question

I'm trying to make a slideshow on my webpage that will iterate through a list of html projects and showcase them using an iframe. I'm stuck on how to make the loop that will change the src each time and open the new project.
This is the code I've been able to come up with:
<div class="buttns">
<button id="previous" type="button"><</button>
<div>
<iframe
style="
width: 480px;
height: 270px;
position: relative;
left: 0px;
top: 0px;
overflow: hidden;
"
frameborder="0"
type="text/html"
src=""
width="100%"
height="100%"
allowfullscreen
>
</iframe>
</div>
<button id="next" type="button">></button>
</div>
<script type="text/javascript">
$("#next").click(function () {
$("#p_elem").attr("src", function (data) {
var webpages = [
"../Wolfie873.github.io/Test Projects/DissapearingCircles.html",
"../Wolfie873.github.io/Test Projects/GuessTheNumber.html",
"../Wolfie873.github.io/Test Projects/TestReaction.html",
];
for (var i = 0; i < webpages.length; i++) {
return webpages[i];
}
});
});
</script>
If someone can point me in the right direction, I would greatly appreciate it as I am new to coding.