Implement a CSS-Only Slideshow/Carousel with Next and Previous Buttons

Redundant click with next/previous buttons in image carousel

As Noam commented, when you are grouping the else if statement with the preceding if statement, the following happens:

When you are on the first slide the counter gets set to zero, but then the else statement is not executed. When you again click on the previous button, this time counter is already zero, so the else part gets executed and the button is hidden.
The same thing happens when you are on the last slide.

Solution: Include another if else statement to set display property of the button inside the main if block

prevBtn.addEventListener("click", function(){
    if (counter > 0 && counter < myimages.length){
            counter--;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            if (counter === 0) {
              prevBtn.style.display = "none";
            }
            else {
              prevBtn.style.display = "block";
              nextBtn.style.display = "block";
            };
        }
    });

nextBtn.addEventListener("click", function(){
    if (counter < myimages.length-1){
        counter++;
        myimage = myimages[counter];
        mycaption = mycaptions[counter];
        imageContainer.innerHTML = '<img src="'+myimage+'" />';
        captionContainer.innerHTML = mycaption;
        if (counter === myimages.length - 1) {
            nextBtn.style.display = "none";
        }
        else {
          prevBtn.style.display = "block";
          nextBtn.style.display = "block";
        };
    }
});

How can I make an image carousel with only CSS?

That's easy! Just use radio buttons and targeted labels.

Radio buttons have the (necessary) behavior of only allowing one to be selected at any one time—just like an image in our carousel.

Demo

div.wrap2 {  float: left;  height: 500px;  width: 422px;}div.group input {  display: none;  left: -100%;  position: absolute;  top: -100%;}div.group input ~ div.content {  border: solid 1px black;  display: none;  height: 350px;  margin: 0px 60px;  position: relative;  width: 300px;}div.group input:checked ~ div.content {  display: block;}div.group input:checked ~ label.previous,div.group input:checked ~ label.next {  display: block;}div.group label {  background-color: #69c;  border: solid 1px black;  display: none;  height: 50px;  width: 50px;}img {  left: 0;  margin: 0 auto;  position: absolute;  right: 0;}p {  text-align: center;}label {  font-size: 4em;  margin: 125px 0 0 0;}label.previous {  float: left;  padding: 0 0 30px 5px;}label.next {  float: right;  padding: 0 5px 25px 0;  text-align: right;}

<div class="wrap">  <div class="wrap2">    <div class="group">      <input type="radio" name="test" id="0" value="0">      <label for="4" class="previous"><</label>      <label for="1" class="next">></label>      <div class="content">        <p>panel #0</p>        <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286">      </div>    </div>    <div class="group">      <input type="radio" name="test" id="1" value="1">      <label for="0" class="previous"><</label>      <label for="2" class="next">></label>      <div class="content">        <p>panel #1</p>        <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139">      </div>    </div>    <div class="group">      <input type="radio" name="test" id="2" value="2">      <label for="1" class="previous"><</label>      <label for="3" class="next">></label>      <div class="content">        <p>panel #2</p>        <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200">      </div>    </div>    <div class="group">      <input type="radio" name="test" id="3" value="3" checked="">      <label for="2" class="previous"><</label>      <label for="4" class="next">></label>      <div class="content">        <p>panel #3</p>        <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287">      </div>    </div>    <div class="group">      <input type="radio" name="test" id="4" value="4">      <label for="3" class="previous"><</label>      <label for="0" class="next">></label>      <div class="content">        <p>panel #4</p>        <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139">      </div>    </div>  </div></div>

Slider next / prev. button

A quick google for 'CSS only slider with prev and next buttons' brought up many things, including this:

https://codepen.io/AMKohn/pen/EKJHf

It is very, very difficult to be specific given the information you have provided.

The slider component:

<ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
        <div class="slide">
            <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-6" class="prev">‹</label>
            <label for="img-2" class="next">›</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-1" class="prev">‹</label>
            <label for="img-3" class="next">›</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-2" class="prev">‹</label>
            <label for="img-4" class="next">›</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-3" class="prev">‹</label>
            <label for="img-5" class="next">›</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-4" class="prev">‹</label>
            <label for="img-6" class="next">›</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-5" class="prev">‹</label>
            <label for="img-1" class="next">›</label>
        </div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>

And the CSS:

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

      opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots .nav-dot {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
    background: rgba(0, 0, 0, 0.8);
}

Implement a CSS-Only Slideshow/Carousel with Next and Previous Buttons

Redundant click with next/previous buttons in image carousel

How can I make an image carousel with only CSS?

Demo

Slider next / prev. button

Related Topics

Leave a reply