SOURCE

console.log("hello")
function Carousel(elem) {
    this.elem = elem;
}

Carousel.prototype.init = function (options) {
    let instance = document.getElementById(this.elem);
    if (!instance) {
        console.error("no element")
        return;
    }

    this.options = Object.assign({
        width: 200,
        height: 400,
        currentIndex: 0
    }, options)
    
    if (!this.options.images) {
        console.log("no images")
        return
    }
    let html = '<div class="item prev"></div><div class="item current"></div><div class="item next"></div>'
    instance.innerHTML = html;
    instance.style.width = this.options.width + 'px';
    instance.style.height = this.options.height + 'px';
    let items = instance.getElementsByClassName("item");
    let imageLen = this.options.images.length;
    let currentIndex = this.options.currentIndex;
    let prevIndex = ((currentIndex - 1) + imageLen) % imageLen
    let nextIndex = (currentIndex + 1 ) % imageLen;
    console.log(currentIndex, prevIndex, nextIndex)
}

let carousel = new Carousel("carousel");

carousel.init({
    images: ['https://static.runoob.com/images/demo/demo2.jpg', 'https://static.runoob.com/images/demo/demo1.jpg', 'https://static.runoob.com/images/demo/demo3.jpg', 'https://static.runoob.com/images/demo/demo4.jpg'],
})


function Box(value) {
    this.value = value;
}
Box.prototype.getValue = function () {
    return this.value;
};
const box = new Box(1);
console.log(box.getValue())

<div id="carousel">
    <!-- <div class="item"><img src="./images/1.jpeg" /></div>
    <div class="item"><img src="./images/2.jpeg" /></div>
    <div class="item"><img src="./images/1.jpeg" /></div>
    <div class="item"><img src="./images/2.jpeg" /></div> -->
</div>