Image Slideshow With CSS Transitions

Postingan Image Slideshow with CSS transitions ini belum lengkap karena masih coba-coba dan masih disusuaikan dengan cms blogspot yang bisa berubah karena update dari blogspot sendiri.

Image Slideshow With CSS Transitions

CSS

<style>
.slider{position:relative;overflow:hidden;height:600px}
.slider > *{opacity:0;z-index:0;position:absolute;top:0;left:0;width:100%;height:600px;object-fit:cover}
.current{opacity:1;z-index:2}
.previous{z-index:3;transition-property:opacity;transition-duration:1s;transition-timing-function:ease}
</style>

JS

<script>
  class Slighter {
    constructor(sliderContainer, interval) {
        this.sliderContainer = sliderContainer;
        this.currentSlide = 0;
        this.sliderContainer.children[this.currentSlide].classList.add("current");
        if (this.sliderContainer.children.length > 1)
            setInterval(() => this.changeSlide(), interval);
    }
    changeSlide() {
        this.sliderContainer.children[this.previousSlide].classList.remove("previous");
        this.sliderContainer.children[this.currentSlide].classList.replace("current", "previous");
        this.sliderContainer.children[this.nextSlide].classList.add("current");
        this.currentSlide = this.nextSlide;
    }
    get previousSlide() {
        if (this.currentSlide === 0) {
            return this.sliderContainer.children.length - 1;
        }
        return this.currentSlide - 1;
    }
    get nextSlide() {
        if (this.currentSlide < this.sliderContainer.children.length - 1) {
            return this.currentSlide + 1;
        }
        return 0;
    }
}

Initialize the Slighter slideshow and done.

let slider = new Slighter(document.querySelector('.slider'));

Determine the duration of the animation (5000ms in this example).

let slider = new Slighter(document.querySelector('.slider'), 5000);