Scroll Lest and Right using previous and next button Approach 2

by dollysingh3192

HTML

<div>
    <button id="prev_button">Previous</button>
    <div id="output1" class="tab">1</div>
    <div id="output2" class="tab">2</div>
    <div id="output3" class="tab">3</div>
    <button id="next_button">Next</button>
</div>

CSS

.tab {
  width: 30px;
  height:30px;
  line-height: 30px;
  display: inline-block;
  background-color: #d3d3d3;
  text-align: center;
  vertical-align: middle;
}

JavaScript

var arr = [1,2,3,4,5,6,7];
var len = arr.length;
console.log(len)
var size = 2;

var start = 0;


window.addEventListener('load', function () {
    document.getElementById('prev_button').addEventListener(
        'click', // we want to listen for a click
        function (e) { // the e here is the event itself
            if(start === 0) {
              start = len;
            }
            document.getElementById('output1').textContent = arr[(start - 1) % len];
            document.getElementById('output2').textContent = arr[(start) % len];
            document.getElementById('output3').textContent = arr[(start + 1) % len];
            start = start - 1;
            console.log(start)
        }
    );
    
    document.getElementById('next_button').addEventListener(
        'click', // we want to listen for a click
        function (e) {
            if(start === len) {
              start = 0;
            }
            document.getElementById('output1').textContent = arr[(start + 1) % len];
            document.getElementById('output2').textContent = arr[(start + 2) % len];
            document.getElementById('output3').textContent = arr[(start + 3) % len];
            
            start = start + 1;
            console.log(start)
        }
    );
});