After developing a slick slider, I decided to add custom arrows. The standard method from slick involves using prevArrow: and nextArrow:, but I wanted the buttons outside of the slick-slider container. To achieve this, I placed additional prev and next buttons outside the container and used JavaScript to give them functionality similar to the default ones. However, I encountered an error with the JavaScript portion which stated "Cannot read property 'click' of null at HTMLButtonElement." How can this error be resolved?
html
<div class="mates">
<button class="prev-g" id="prev-gg">prev</button>
<button class="next-g" id="next-gg">next</button>
<div class="mates-container" id="mates-containerrr">
<button class="prev-h" id="prev-hh">prev</button>
<button class="next-h" id="next-hh">next</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.mates-container').slick({
infinite: true,
speed: 450,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='prev-h' id='prev-hh'>prev</button>",
nextArrow: "<button class='next-h' id='next-hh'>next</button>",
});
});
</script>
<script type="text/javascript">
const badBtn = document.getElementById("next-hh");
const editedBtn = document.getElementById("next-gg");
editedBtn.addEventListener("click", function() {
badBtn.click();
});
</script>
If you require more code or have any inquiries, please feel free to leave a comment!