rework a for loop into an each function

rework a for loop into an each function

I have this code on jsfiddle: https://jsfiddle.net/jlrough/wq95ycr5/
Code works except there is no place to add some images for the carousel so you can't really run it and see the carousel.
What is wrong with it is the for loop is a closure and it doesn't work since it befuddles the i value in the hover function.  The next and for links work to go to the next image.
Someone said to fix it by using each instead which I am trying to do below.  You can see commented out the for loop.
I am getting a unidentified identifier with this function.  TIA

  // add events to dots
       // for (var i = 0; i < $('.carousel-dots-nav-item').length; i++) {
        $('.carousel-dots-nav-item').each(function(index, value){
        var value = carouselItems;
        var index =i;
        var dot = $('.carousel-dots-nav-item')[i];
        
            // 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('');
            });