Q:

Function is not working when called inside "addEventListener"

I am trying to make a slideshow in a webpage. 
I created the next and previous button for changing images in different way. The next button is working but the previous button in not working. The display property of the images is set to none by default.

var nextbutton = document.querySelector(".next");
var prevbutton = document.querySelector(".prev");
var slide = document.querySelectorAll('.slideshow');
var slideindex = 1 ;

var show = function(n){
  var i;
  if (n > slide.length) { slideindex = 1};
  if (n < 1) {slideindex = slide.length};
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  };
  slide[slideindex-1].style.display = "block";

};

var cl = function(p) {
  show(slideindex += p);
};

/* next button is working */
nextbutton.addEventListener("click", function(){
  show(slideindex += 1 );
} );

/* previous button is not working */
prevbutton.addEventListener("click" , cl(-1));
.slideshow {
  width:100%;
  height: 500px !important ;
  border-radius: 7px;
  display: none;
 }
<section class="content-head">
        <div class="container">
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_woods_wide.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_5terre.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_mountains.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_lights.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_nature.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_snow.jpg">
            </div>
        </div>
        <div class="button container">
            <a class="prev">&#10094;</a>
            <a class="next">&#10095;</a>
        </div>
      </section>

A:

prevbutton.addEventListener("click" , cl(-1));

This calls the function immediately, when you bind the event, not when the event fires. You avoid this mistake when binding the next button event.
Change to:
prevbutton.addEventListener("click", evt => cl(-1));

or
prevbutton.addEventListener("click", function(evt) { cl(-1); });

