Slick Slider – change contents based on current slide data-index
I would combine the two lines where you get the dataIndex, rename that to dataId to be consistent with the HTML element, and replace the loop by hiding everything, and then showing the correct element by finding it with a jQuery selector:

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var dataId = $(slick.$slides[currentSlide]).data('index');  
    $('.content').hide();
    $('.content[data-id=' + dataId + ']').show();    
});


I also noticed that looking up dataId is superfluous, since it is simply the value of currentSlide plus one.  So you could also make this change and retain the same behavior:

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){   
  $('.content').hide();
  $('.content[data-id=' + (currentSlide + 1) + ']').show();
});