Bir projem için basit bir slider eklentisi yazdım. Belki birinin işine yarar.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multiple Sliders</title>
    <style>
        .slider-container {
width: 300px;
            margin: 0 auto;
            position: relative;
        }
.slider {
height: 200px;
            display: flex;
            overflow: hidden;
        }
.slide {
flex: 0 0 100%;
            transition: transform 0.3s ease;
            text-align: center;
            padding-top: 80px;
        }
.slide.active {
transform: translateX(0);
        }
.slider-controls {
display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
.prev-button,
        .next-button {
font-size: 20px;
            background-color: #717171;
            color: #fff;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
        }
.dots {
display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
        }
.dot {
width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #bbb;
            margin: 0 5px;
            cursor: pointer;
        }
.dot.active {
background-color: #717171;
        }
:disabled {
opacity: 0.45;
        }
</style>
</head>
<body>

<div class="slider-container">
    <div class="slider">
        <div class="slide active"><h1>İçerik 1</h1></div>
        <div class="slide"><h1>İçerik 2</h1></div>
        <div class="slide"><h1>İçerik 3</h1></div>
    </div>
    <div class="slider-controls" style="display:flex;">
       <button class="prev-button">prev</button>
        <div class="dots"></div>
       <button class="next-button">next</button>
    </div>
    <div class="slider-controls"></div>
</div>


<div class="slider-container">
    <div class="slider">
        <div class="slide active"><h1>İçerik 1</h1></div>
        <div class="slide"><h1>İçerik 2</h1></div>
        <div class="slide"><h1>İçerik 3</h1></div>
    </div>
    <div class="slider-controls" style="display:flex;">
        <button class="prev-button">prev</button>
        <div class="dots"></div>
        <button class="next-button">next</button>
    </div>
    <div class="slider-controls"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    (function ($) {
$.fn.simpleSlider = function () {
return this.each(function () {
const $sliderContainer = $(this);
                const $slider = $sliderContainer.find(".slider");
                const $slides = $slider.children();
                const $controls = $sliderContainer.find(".slider-controls");
                const $prevButton = $controls.find(".prev-button");
                const $nextButton = $controls.find(".next-button");
                const $dotsContainer = $sliderContainer.find(".dots");

                let slideIndex = 0;

                createDots();
                showSlide(slideIndex);

                function createDots() {
$dotsContainer.empty();
                    $slides.each((i) => {
const dot = $("<span>")
.addClass("dot")
.toggleClass("active", i === slideIndex)
.appendTo($dotsContainer);
                    });
                }

function showSlide(n) {
const numSlides = $slides.length;
                    slideIndex =
n >= numSlides ? 0 : n < 0 ? numSlides - 1 : n;

                    $slides.each((i, slide) => {
$(slide)
.toggleClass("active", i === slideIndex)
.css("transform", `translateX(${-100 * slideIndex}%)`);
                    });

                    $dotsContainer
.children()
.removeClass("active")
.eq(slideIndex)
.addClass("active");

                    if (slideIndex === 0) {
$prevButton.prop("disabled", true);
                    } else {
$prevButton.prop("disabled", false);
                    }

if (slideIndex === numSlides - 1) {
$nextButton.prop("disabled", true);
                    } else {
$nextButton.prop("disabled", false);
                    }
}

$prevButton.prop("disabled", true);

                $prevButton.on("click", () => showSlide(slideIndex - 1));
                $nextButton.on("click", () => showSlide(slideIndex + 1));

                $dotsContainer.on("click", ".dot", function () {
const dotIndex = $(this).index();
                    showSlide(dotIndex);
                });

            });
        };
    })(jQuery);
    $(function () {
$(".slider-container").simpleSlider();
    });
</script>
</body>
</html>