basic jquery function and lack of understanding

I'm trying to make a slider and i'm new to programming in general. this was an idea i saw someone else use but i have messed with it so much that i cant find the original code and don't know whats wrong. I understand how trivial this is and i've tried researching and i just cant comprehend the problem i suppose. When this code runs it doesn't display the first div on the first round but then every time after it does. Also, it hesitates after the last div while returning to the first.. here is the relevant code.

$(document).ready(function(){
var i = 1; // Counter
$slides = $('.slides > .slide');
$num = $slides.length; 
setInterval(function() {
if (i++ == $num) {
    $('.slide').removeClass('active').hide();
    $($slides[0]).addClass('active').show();
    i = 1;
} 
else {                    $('.active').removeClass("active").hide().next().addClass('active').show();
}
}, 1000); 
});</code>

<div class="slides">
<div class="slide active"><img     src="http://ift.tt/1PzT0m6"></div>
<div class="slide"><img src="http://ift.tt/NHgQRX?    q=tbn:ANd9GcTZGdGuuz-9FgSq0I-VbiWrO1z5x3KmXpL71HC2rBDRHLCOTNTP_XVCIxdA"></div>       <div class="slide"><img src="http://ift.tt/2b7t3yq"></div>
</div>