How to create data structure that supports carousel behavior? - arrays

Question

It's a simple Vue.js test application and the code looks as following:
<template>
<div>
<button #click="onPrevious">Previous</button>
<button #click="onNext">Next</button>
<br><br>
<div v-for="(a, index) in chunkedArr()" :key="index">
<div v-for="(i, index) in a" :key="index">{{ i }}</div>
-
</div>
</div>
</template>
<script>
export default {
data() {
return {
input: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
newInput: [],
currentIndex: 0
}
},
mounted() {
const temp = []
for (let i = 0; i < this.input.length; i += 3) {
let chunk = this.input.slice(i, i + 3)
if (chunk.length === 1) {
chunk = chunk.concat(this.input.slice(0, 2))
}
if (chunk.length === 2) {
chunk = chunk.concat(this.input.slice(0, 1))
}
temp.push(chunk)
}
this.newInput = temp.flat()
},
methods: {
chunkedArr() {
if (this.newInput.length === 0) {
return
}
const output = []
for (let i = this.currentIndex; i < this.newInput.length; i += 3) {
let chunk = this.newInput.slice(i, i + 3)
output.push(chunk)
}
console.log(output)
return output
},
onNext () {
this.chunkedArr()
},
onPrevious () {
// TODO
}
},
}
</script>
We could simulate carousel with Next and Previous buttons. Suppose we have some array of elements that should be displayed in carousel.
But, in this carousel we should display 3 elements at once. It means 3 elements should be visible only on each click Next/Previous. For example, if we have an array of elements: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, the initial state is to display: 1, 2, 3. On first click on Next, carousel should display 4, 5, 6 and so on. There are 3 cases at the end of array. The array can have 1, 2 or 3 elements at the end. If it has 3 elements, everything is easy. But if it has 1 or 2 elements, we need to add 2 or 1 elements respectively. In case of having 1 element at the end we need to add first 2 elements of array in order to display 3 elements. In case of having 2 elements at the end (our test case) we need to add first element only in order to display 3 elements. The rotating should go further based on previously described scenario.
Please, take a look at the screenshot attached:
In real case I need that data structure for BootstrapVue's Carousel.
UPDATE:
There are 4 subarrays in output array. Please, take a look at the screenshot below:
UPDATE:

Answer 1

const example = [1, 2, 3, 4, 5];
const subArrayIterator = subArrayGenerator(example);
console.log('init: ' + subArrayIterator.next().value); // init
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
prevBtn.onclick = () => {
console.log(subArrayIterator.next(false).value);
}
nextBtn.onclick = () => {
console.log(subArrayIterator.next().value);
}
function* subArrayGenerator(inputArray, subArrayLength=3) {
let prev = false;
for (let i = 0; i < inputArray.length;) {
if (prev) {
let diff = subArrayLength*2;
if (diff > inputArray.length) {
diff = diff % inputArray.length;
}
diff = i - diff;
i = diff < 0 ? inputArray.length + diff : diff;
}
const subArray = [];
for (let j = 0; j < subArrayLength; j++) {
subArray.push(inputArray[i]);
i = i < inputArray.length - 1 ? i + 1 : 0;
}
prev = (yield subArray) === false;
}
}
<button type="button" id="prev">prev</button>
<button type="button" id="next">next</button>

Answer 2

Another approach:
Rotate the array by appending a splice of input from 0 to currentIndex:
input.push(...input.splice(0, currentIndex))
Pad the array to a max length of 12 by appending a slice of input from 0 to the pad length:
while (12 - input.length > 0) {
input.push(...input.slice(0, 12 - input.length))
}
Split the array into slices of 3 by Array(size).fill().map():
const output = Array(Math.ceil(input.length / 3)).fill().map((_, i) => input.slice(i * 3, i * 3 + 3))
demo