Добавление стрелочек к стандартному слайдеру таплинка

Код вставьте как хтмл блок

<script>
document.addEventListener('DOMContentLoaded', () => {
let slider = document.querySelectorAll('.block-slider');
  for (i=0; i<slider.length; i++) {
   slider[i].setAttribute('slider-number', [i])
  slider[i].insertAdjacentHTML('afterbegin', '<div class="nav-controls"><svg arrow-number="'+[i]+'" onclick="PrevSlide (this)" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3827 5.07611C20.2 5.00045 19.9989 4.98065 19.8049 5.01923C19.611 5.05781 19.4328 5.15302 19.2929 5.29284L9.29292 15.2928C9.20006 15.3857 9.12639 15.496 9.07613 15.6173C9.02587 15.7386 9 15.8687 9 16C9 16.1313 9.02587 16.2614 9.07613 16.3827C9.12639 16.504 9.20006 16.6143 9.29292 16.7072L19.2929 26.7072C19.4328 26.847 19.611 26.9422 19.8049 26.9808C19.9989 27.0194 20.2 26.9996 20.3827 26.9239C20.5654 26.8482 20.7216 26.72 20.8315 26.5556C20.9414 26.3911 21 26.1978 21 26V6C21 5.80222 20.9414 5.60888 20.8315 5.44443C20.7216 5.27998 20.5654 5.15181 20.3827 5.07611Z" fill="black"/></svg><svg arrow-number="'+[i]+'" onclick="NextSlide (this)" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.7071 15.2928L12.7071 5.29285C12.5672 5.153 12.389 5.05777 12.1951 5.01919C12.0011 4.98062 11.8 5.00043 11.6173 5.07612C11.4346 5.15181 11.2784 5.27998 11.1685 5.44443C11.0586 5.60888 11 5.80222 11 6V26C11 26.1978 11.0587 26.3911 11.1685 26.5556C11.2784 26.72 11.4346 26.8482 11.6173 26.9239C11.8 26.9996 12.0011 27.0194 12.1951 26.9808C12.389 26.9422 12.5672 26.847 12.7071 26.7072L22.7071 16.7072C22.8 16.6143 22.8736 16.504 22.9239 16.3827C22.9741 16.2614 23 16.1313 23 16C23 15.8687 22.9741 15.7386 22.9239 15.6173C22.8736 15.496 22.8 15.3857 22.7071 15.2928Z" fill="black"/></svg></div>')
  
}
});

function NextSlide (el) {
    var number = el.getAttribute('arrow-number')
	var next = document.querySelector('div[slider-number="'+number+'"] .slider-nav .active')
	if (next.nextSibling !==null) {
	next.nextSibling.click()}
	else {document.querySelector('div[slider-number="'+number+'"] .slider-nav .slider-dot:nth-child(1)').click()}
	
}
function PrevSlide (el) {
var number = el.getAttribute('arrow-number')
var prev = document.querySelector('div[slider-number="'+number+'"] .slider-nav .active')
	if (prev.previousElementSibling !==null) {
prev.previousElementSibling.click()}
	else {document.querySelector('div[slider-number="'+number+'"] .slider-nav .slider-dot:nth-last-child(1)').click()}
}
</script>
<style>
.block-slider {
  position:relative;
}
.nav-controls {
  position:absolute;
  width:100%;
  z-index:20;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  display:flex;
  justify-content:space-between;
}
.nav-controls svg path {fill:white;}
.nav-controls svg {pointer-events:all;}</style>

Для смены цвета стрелочек в строчке .nav-controls svg path {fill:white;} вместо white вставьте любой свой код цвета