setInterval et clearInterval

Bonjour à tous, alors j'éssai de créer un carousel pour mon site qui fait défiler des images automatiquement,à ce niveau tout va bien mais lorsque je veux faire une fonction pause qui me permet de stopper le défilement des images lorsqu'on clique sur une image rien ne se passe. Le soucis se situe au niveau de javascript avec setInterval et clearInterval selon moi. Merci pour votre aide

// mon hmtl
        <div class="slider">
            <img class="slide1" id="img1" src="reine.png" alt="">
            <img class="slide2" id="img2"src="mask.png" alt="">
            <img class="slide3" id="img3"src="tv65pouces.png" alt="">
            <img class="slide4" id="img4"src="mask.png" alt="">
            <img class="slide5" id="img5"src="reine.png" alt="">
        </div>

        // mon javascript, dans cet exemple on prend uniquement le cas ou je clique sur la //première image id="img1"

        function carousel (){
    document.getElementById('radio' + counter).checked= true;
    counter++;
    if(counter>5){
        counter=1;
    }
}; function play() {setInterval(carousel,5000);} ; 

play();

const img1=document.getElementById("img1");
const slide1=document.querySelector(".slide1");
function pause() { clearInterval(play);};

img1.addEventListener('click',()=>{

    let verification1 = img1.getAttribute("class");
    if (verification1==="slide1") {slide1.classList.remove('slide1');pause(); } else {slide1.classList.add('slide1');play();}

});

Ce que je veux

Décrivez ce que vous cherchez à obtenir.

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(