This simple jquery user review box crashes after about 5 minutes

I created a rotating user review box using jquery to run the code to choose a random review, display it for 7 seconds, hide it and replace it with a new review.

I created a fiddle at http://ift.tt/1XfP4OV

The function essentially runs fine for about 5 minutes depending on which browser is being used. It initiates when the div is ready. The function chooses a random review numbered 0 to 5. It checks that this review was not previous one viewed. It removes the previous review, displays the new review, waits 7 seconds and then runs the function again carrying the current review number as a variable which becomes the previous variable.

When it runs the review is displayed as well as the new number and the previous number for testing purposes.

It runs nicely and the numbers change and the review changes. Reviews are not repeated because when it chooses a new number that equals the previous, a new number is chosen. Then all of a sudden, the reviews don't show up anymore although the numbers change or the numbers change without the 7 second timing. Ultimately causing jquery to throw an error and crash.

Here is the code:

    <span id="dddd"></span>
<div class="tp_box2">
    <div class="tp-box horizontal" id="tp-iframe-widget"  style="overflow:hidden">
        <section class="reviews">
            <div id="tpslides0" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>4.5 stars</h1>
                </div>
            </div>      
            <div id="tpslides1" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>4.0 stars</h1>
                </div>
            </div>      
            <div id="tpslides2" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>3.5 stars</h1>
                </div>
            </div>          
            <div id="tpslides3" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>3.0 stars</h1>
                </div>
            </div>          
            <div id="tpslides4" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>2.5 stars</h1>
                </div>
            </div>          
        </section>
    </div>
</div>

And the jquery - I am using v2.1.3 but it also crashes on 1.11 and 1.10

function rotate_tp(previousslide) {
    $activeslide = Math.floor((Math.random() * 5));
    $('#dddd').html($activeslide + ' ' + previousslide);
    if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); };
    $('#tpslides'+previousslide).hide().css('z-index','-1'); $('#tpslides'+$activeslide).css('z-index','100').fadeTo( "slow" , 1);
    setTimeout(function() { rotate_tp($activeslide); }, 7000);


};
$('#tp_box2').ready(
function(){
    $("[id^=tpslides]").hide().css('z-index','-1');
    rotate_tp();

});

The css for those that might want to see it:

p:first-letter, h3:first-letter { text-transform: capitalize; }

.tp-box 
{
  font-size: 11px;
  background:#F7F7F7;
  display:block;
  float:right;
  color:#666;
  position:relative;
  width:100%;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  background: #f1ebe8; 
    transition: all 4s;
    -webkit-transition: all 4s;
    -moz-transition: all 4s;
}
.tp-box a {
  color:#666;
}
.tp-box:hover 
{
  border-top:1px solid #E5E2D7;
  border-bottom:1px solid #E5E2D7;
  background: #F7F9F8; 
    transition: all 4s;
    -webkit-transition: all 4s;
    -moz-transition: all 4s;
}
.tp-box.horizontal{
   float: none ;
  clear: both ;
  max-height: 100px !important;
  height:86px;
}

.tp-box header {

  text-align:center;
  padding:6px 10px 12px;
}
.tp-box.horizontal header{

    float: left ;
}

.tp-box header h1 { 
  font:bold 2.182em/1.255em sans-serif;
  margin:0;
}

.tp-box header p.review-count { 
  margin:5px 0 0;
 }
.tp-box .review-count a { 
  text-decoration:none;
}

.tp-box section.reviews h1 {
  background:#DDDDDD;
  font-size:1.273em;
  font-weight:700;
  color:#444444;
  padding:5px 10px;
  margin-bottom: 10px ;
}

.tp-box section.reviews {
  display:block;
  overflow:hidden;
  margin:0;
}
.tp-box.horizontal section.reviews{
  height: 100px ;
  overflow: hidden ;
}

.tp-box section.reviews article {
 /* border:1px solid #DDDDDD;
  border-radius:4px;*/
  margin:0px 10px 10px 0px;
  padding:3px 0px 10px 0px;
  position: relative ;
 /*clear: both ;*/
  float:left;
  /* width:180px;
( overflow:hidden;*/
}

.tp-box section.reviews article a {
  color:#CE5600;
}

.tp-box section.reviews article:last-child {
  border-bottom:none;
  margin-bottom:0;
}

.tp-box time {
  display:block;
  -moz-opacity:0.6;
  opacity:0.6;
  position:absolute;
  top:0;
  right:0;
  text-transform:uppercase;
}

.tp-box h3 {
  clear:both;
  color:#444444;
  font-size:1.091em;
  font-weight:700;
  padding:6px 0 0;
}

.tp-box p.desc {
  padding:0 0 0px;
}

.tp-box img.user-img {
  float:left;
  padding:0 6px 0 0;
}

.tp-box p.author {
  position:relative;
  font-style:italic;
  top:-2px;
}

.tp-box a.footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px; 
  border-radius: 5px;
  font-size:11px;
  font-weight:700;
  display: block ;
  margin:0px auto;
  width:90px;
  text-transform:uppercase;
  text-decoration:none;
  color:#000;
  line-height: 22px ;
  padding-left: 12px ;
  background: #DDD url(http://ift.tt/1T4pW78) 2px center no-repeat;
}

.tp-box a.footer span.pilot {
  color:#444;
}