Carousel VideoSlider problem

Hello. My name is Cosmin and I am new on this forum and also I am new in Javascript programming, so I need some help please.
I tried to make a video carousel and I used for this Slick plugin. I wrote the code in Html and CSS and I imported the Javascript file from Slick and I manage to make the carousel working. The content of the carousel is video content not picture. So I put some video inside of the carousel.

The problem started when I want to make a custom controls bar for the video. I manage to make the Javascript code for the Play button and it works but…only when the video is in the first position of a carousel.If I slide the carousel to the next position, the play button doesn’t work and I don’t know why.

Maybe someone can help me please with this problem.
Thank you very much.

Here is the Javascript code:

“`
$(document).ready(function(){
$(‘.caruselPost’).slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
nextArrow: $(‘.next’),
prevArrow: $(‘.prev’),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 860,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: “unslick”
// instead of a settings object
]
});
});

var video = document.querySelector(‘.video’);
var btn = document.getElementById(‘play-pause’);

function PlayPause() {

if(video.paused){
btn.className = ‘pause’;
video.play();
}else{
btn.className = ‘play’;
video.pause();
}
}

btn.onclick=function(){
PlayPause();
}
“`

Also in #JavaScript ↴