Slick slider custom Paging with Image and accessibility

slick-customPaging-img.js

$( document ).on( 'ready', () => {
	$( '.slider-nav' ).slick( {
		responsive: [
			{
				breakpoint: 767,
				settings: {
					dots: true,
					customPaging: function( slick, index ) {
						var targetImage = slick.$slides.eq( index ).find( 'img' ).attr( 'src' );
						return '<button><img src=" ' + targetImage + ' " alt="image" /></button>';
					}
				}
			}
		]
	} );
} );