slider.txt

   <div class="galleryOverlay hidden">
              <div class="closeGallery">
                  ✖️
              </div>
               <p class="back opacity">◄</p>
              <div class="sliderImages">

                  <img src="" class="coverPage" alt="Book Cover">
                  <p class="paragraph"></p>

              </div>
                 <p class="forth">►</p>
    </div>

i show that when you click a button 


 document.querySelector(".detail").addEventListener("click", function(){
        document.querySelector(".galleryOverlay").classList.remove("hidden");
    })

let slideConter = 1;

const exhibitionObject = [
            {id:1, path:"covers/cover17.jpeg", shortSentence:"This book is for all ages. Like a vibrant kaleidoscope, it will ignite your imagination and leave you wanting more!"},
            {id:2, path:"covers/cover18.jpeg", shortSentence:"Bu kitap her yaşa hitap ediyor. Canlı bir kaleydoskop gibi, hayal gücünüzü ateşleyecek ve daha fazlasını isteyeceksiniz!"},
            {id:3, path:"covers/Perspective1.png", pdf:"https://berat.cloud.mech.cx/Perspective/Perspective.pdf", alt:"Book Cover 11", shortSentence:"Perspective series: Exploring different viewpoints and angles."}
]

   const setInitialState = () => {


            document.querySelector(".coverPage").src = exhibitionObject[0].path;
            document.querySelector(".paragraph").innerText = exhibitionObject[0].shortSentence;
        }
        setInitialState();

        document.querySelector(".forth").addEventListener("click", function(e){

                 console.log("counter");

                 document.querySelector(".coverPage").src = "";
                 document.querySelector(".paragraph").innerText = "";

                 if(slideConter <=  Object.values(exhibitionObject).length - 1){

                     document.querySelector(".back").classList.remove("opacity");
                     slideConter++;
                     console.log(slideConter);

                 }
                 if(slideConter === Object.values(exhibitionObject).length)
                 {
                    e.currentTarget.classList.add("opacity");
                 }
                 exhibitionObject.forEach((ele) => {
                    if(ele.id === slideConter)
                    {
                        document.querySelector(".coverPage").src = ele.path;
                        document.querySelector(".paragraph").innerText = ele.shortSentence;
                    }
                 })

        })
        document.querySelector(".back").addEventListener("click", function(e){

            document.querySelector(".coverPage").src = "";
            document.querySelector(".paragraph").innerText = "";

             document.querySelector(".forth").classList.remove("opacity");
             if(slideConter > 1){
                  slideConter--;
            }

            if(slideConter === 1){
                console.log("equal");

                console.log(slideConter);
                e.currentTarget.classList.add("opacity");
            }

            exhibitionObject.forEach((ele) => {
                if(ele.id === slideConter)
                {
                    document.querySelector(".coverPage").src = ele.path;
                    document.querySelector(".paragraph").innerText = ele.shortSentence;
                }
            })

        })