rework a for loop to an each function

rework a for loop to an each function

I'm trying to rewrite this function:
 for (i = 0; i < $('.carousel-dots-nav-item').length; i++) {
            var dot = $('.carousel-dots-nav-item')[i];

            // show the title of the image when hovering the associated dot
            $(dot).hover(function(e){
                $('#title').text(carouselItems[i].title);
            }, function(e){
                $('#title').text('');
            });


To this one below using the each instead of the for loop above  because there is a closure and the for loop doesn't work with a closure making the index is off.   I'm getting an unexpected identifier error, probably the carouselItems value, or index, i   something isn't right with the each function.   

If you want to see the whole code  above it is here on fiddler, https://jsfiddle.net/jlrough/wq95ycr5/.  The next and forward links work and the dots work but don't give the title for the hover function and it only works on the first click on whichever dot. 
 I don't have images in the one on fiddler but other than that it works if you add images to it.  
This is my proposed fix which I haven't gotten working yet.
$('.carousel-dots-nav-item').each(function(i, carouselItems){
            // show the title of the image when hovering the associated dot
           var dot = $('.carousel-dots-nav-item')[i]; 

            $(dot).hover(function(e){
            /*var i =  $('#carousel-dots-nav').data("data-dot");
            console.log(i) ;*/
               $('#title').text(carouselItems[i].title);
            }, function(e){
                $('#title').text('');
            });