Slider using JS, HTML and CSS

index.html

<div class="slider">
    <button id="previous-button">Previous</button>
    <div class="item-container selected"></div>
    <div class="item-container"></div>
    <div class="item-container"></div>
    <div class="item-container"></div>
    <div class="item-container"></div>
    <button id="next-button">Next</button>
  </div>
</div>

script.js

var rightCounter = 0;
var elements = document.getElementsByClassName('item-container');
var numberOfElements = elements.length;
var leftCounter = numberOfElements;
document.getElementById("next-button").addEventListener('click', function() {
  rightCounter++;
  if(rightCounter >= numberOfElements) {
     rightCounter = 0;   
  }
   var selectedElement = document.getElementsByClassName('item-container selected');
  if (selectedElement) {
    console.log(selectedElement[0].classList, rightCounter)
    selectedElement[0].classList.remove('selected');    
  }
  elements[rightCounter].classList.add('selected');
})


document.getElementById("previous-button").addEventListener('click', function() {
  leftCounter--;
  if(leftCounter < 0) {
     leftCounter = numberOfElements - 1;   
  }
   var selectedElement = document.getElementsByClassName('item-container selected');
  if (selectedElement) {
    console.log(selectedElement[0].classList, leftCounter)
    selectedElement[0].classList.remove('selected');    
  }
  elements[leftCounter].classList.add('selected');
})

slider-using-js-html-and-css.markdown

Slider using JS, HTML and CSS

A Pen by Shobhit on CodePen.

License.

style.css

.slider {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-container {
  border: 1px solid blue;
  border-radius: 50%;
  margin: 2px;
  width: 10px;
  height: 10px;
}

.item-container.selected {
  background-color: black;
}

button {
  margin: 0px 5px 0px 5px;
}