Akifcan · September 11, 2022 16:12
diff --git a/slider.js b/slider.js
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .carousel {
            /* overflow: hidden; */
            display: grid;
            place-items: center;
            position: relative;
            height: 300px;
            width: var(--width);
        }

        .carousel .carousel-item {
            position: absolute;
            width: calc(var(--width) / 2);
            height: 100%;
            background-color: var(--background-color);
            transition: 500ms;
            opacity: 0;
        }

        .carousel-item.active {
            transform: translateX(0) !important;
            opacity: 1;
            z-index: 99;
        }

        .carousel-item.show {
            opacity: 1;
        }
    </style>

 </head>

 <body style="overflow: hidden;">
    <div class="carousel" style="--width: 600px">
        <div class="carousel-item" style="--background-color: red"></div>
        <div class="carousel-item" style="--background-color: orange"></div>
        <div class="carousel-item active" style="--background-color: blue"></div>
        <div class="carousel-item" style="--background-color: green"></div>
        <div class="carousel-item" style="--background-color: pink"></div>
    </div>

    <div class="buttons">
        <button id="prev">Prev</button>
        <button id="next">Next</button>
    </div>

    <script>

        class Carousel {

            constructor(distance = 100, usePadding = false) {
                this.distance = distance
                this.usePadding = usePadding
            }

            wrapper = document.querySelector(".carousel")
            items = document.querySelectorAll(".carousel-item")

            init() {
                this.items.forEach((element, index) => {
                    element.id = `carousel-${index}`
                });
            }

            use() {
                this.wrapper.querySelectorAll(".show").forEach(item => item.classList.remove("show"))
                const activeItem = this.wrapper.querySelector(".carousel-item.active")
                const id = Number(activeItem.id.split("-")[1])

                let counter = 0
                for (let i = id + 1; i < this.items.length; i++) {
                    counter++
                    let value = counter * this.distance
                    if (this.usePadding) {
                        value = counter * (this.distance + this.distance)
                    }
                    this.wrapper.querySelector(`#carousel-${i}`).style.transform = `translateX(${value}%)`
                }
                counter = 0
                for (let i = id - 1; i >= 0; i--) {
                    counter++
                    let value = counter * this.distance
                    if (this.usePadding) {
                        value = counter * (this.distance + this.distance)
                    }
                    this.wrapper.querySelector(`#carousel-${i}`).style.transform = `translateX(-${value}%)`
                }

                if (activeItem.nextElementSibling) {
                    activeItem.nextElementSibling.classList.add("show")
                }
                if (activeItem.previousElementSibling) {
                    activeItem.previousElementSibling.classList.add("show")
                }

            }

            buttons(prevButtonId, nextButtonId) {
                document.getElementById(prevButtonId).addEventListener("click", () => {
                    const activeItem = this.wrapper.querySelector(".carousel-item.active")
                    if (activeItem.previousElementSibling) {
                        const prevItem = activeItem.previousElementSibling
                        activeItem.classList.remove("active")
                        prevItem.classList.add("active")
                        this.use()
                    }
                })

                document.getElementById(nextButtonId).addEventListener("click", () => {
                    const activeItem = this.wrapper.querySelector(".carousel-item.active")
                    if (activeItem.nextElementSibling) {
                        const nextItem = activeItem.nextElementSibling
                        activeItem.classList.remove("active")
                        nextItem.classList.add("active")
                        this.use()
                    }
                })
            }
        }

        const carousel = new Carousel(60, true)

        carousel.init()
        carousel.use()
        carousel.buttons("prev", "next")

    </script>

 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	}

	.carousel {
	/* overflow: hidden; */
	display: grid;
	place-items: center;
	position: relative;
	height: 300px;
	width: var(--width);
	}

	.carousel .carousel-item {
	position: absolute;
	width: calc(var(--width) / 2);
	height: 100%;
	background-color: var(--background-color);
	transition: 500ms;
	opacity: 0;
	}

	.carousel-item.active {
	transform: translateX(0) !important;
	opacity: 1;
	z-index: 99;
	}

	.carousel-item.show {
	opacity: 1;
	}
	</style>

	</head>

	<body style="overflow: hidden;">
	<div class="carousel" style="--width: 600px">
	<div class="carousel-item" style="--background-color: red"></div>
	<div class="carousel-item" style="--background-color: orange"></div>
	<div class="carousel-item active" style="--background-color: blue"></div>
	<div class="carousel-item" style="--background-color: green"></div>
	<div class="carousel-item" style="--background-color: pink"></div>
	</div>

	<div class="buttons">
	<button id="prev">Prev</button>
	<button id="next">Next</button>
	</div>

	<script>

	class Carousel {

	constructor(distance = 100, usePadding = false) {
	this.distance = distance
	this.usePadding = usePadding
	}

	wrapper = document.querySelector(".carousel")
	items = document.querySelectorAll(".carousel-item")

	init() {
	this.items.forEach((element, index) => {
	element.id = `carousel-${index}`
	});
	}

	use() {
	this.wrapper.querySelectorAll(".show").forEach(item => item.classList.remove("show"))
	const activeItem = this.wrapper.querySelector(".carousel-item.active")
	const id = Number(activeItem.id.split("-")[1])

	let counter = 0
	for (let i = id + 1; i < this.items.length; i++) {
	counter++
	let value = counter * this.distance
	if (this.usePadding) {
	value = counter * (this.distance + this.distance)
	}
	this.wrapper.querySelector(`#carousel-${i}`).style.transform = `translateX(${value}%)`
	}
	counter = 0
	for (let i = id - 1; i >= 0; i--) {
	counter++
	let value = counter * this.distance
	if (this.usePadding) {
	value = counter * (this.distance + this.distance)
	}
	this.wrapper.querySelector(`#carousel-${i}`).style.transform = `translateX(-${value}%)`
	}

	if (activeItem.nextElementSibling) {
	activeItem.nextElementSibling.classList.add("show")
	}
	if (activeItem.previousElementSibling) {
	activeItem.previousElementSibling.classList.add("show")
	}

	}

	buttons(prevButtonId, nextButtonId) {
	document.getElementById(prevButtonId).addEventListener("click", () => {
	const activeItem = this.wrapper.querySelector(".carousel-item.active")
	if (activeItem.previousElementSibling) {
	const prevItem = activeItem.previousElementSibling
	activeItem.classList.remove("active")
	prevItem.classList.add("active")
	this.use()
	}
	})

	document.getElementById(nextButtonId).addEventListener("click", () => {
	const activeItem = this.wrapper.querySelector(".carousel-item.active")
	if (activeItem.nextElementSibling) {
	const nextItem = activeItem.nextElementSibling
	activeItem.classList.remove("active")
	nextItem.classList.add("active")
	this.use()
	}
	})
	}
	}

	const carousel = new Carousel(60, true)

	carousel.init()
	carousel.use()
	carousel.buttons("prev", "next")

	</script>

	</body>

	</html>