<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sürüklemeli Slider</title>
<style>
.gwpSlider {
overflow: hidden;
width: 100%;
margin: auto;
}
.gwpSlider-container {
transition: transform 0.2s ease-in-out;
will-change: transform;
cursor: grab;
}
.gwpSlider-container.grabbing {
cursor: grabbing;
}
.gwpSlider-item {
box-sizing: border-box;
display: flex;
float:left;
align-items: center;
justify-content: center;
font-size: 2em;
user-select: none;
}
.gwpSlider-item > div {
width:100%;
}
body {
padding:0;
margin: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="gwpSlider">
<div id="gwpSlider" class="gwpSlider-container">
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
1
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
2
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
3
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
4
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
5
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
6
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
7
</div>
</div>
<div class="gwpSlider-item" >
<div style="background-color: lightcoral;">
8
</div>
</div>
</div>
<div class="gwpSlider-button">
<button class="gwpSlider-button-prev">
Önceki
</button>
<button class="gwpSlider-button-next">
Sonraki
</button>
</div>
</div>
<script>
(function( $ ){
$.fn.gwpSlider = function( options ) {
var settings = $.extend({
PerView: '1',
margin: '10'
}, options);
return this.each(function() {
var $this = $(this),
sliderWidth = $this.width() / settings.PerView,
sliderTotalWidth = sliderWidth * $this.find(".gwpSlider-item").length;
var test = settings.margin / ($this.find(".gwpSlider-item").length);
$this.find(".gwpSlider-container").width(sliderTotalWidth);
$this.find(".gwpSlider-item").css({"width":(sliderWidth - settings.margin),"margin-right":settings.margin});
const carousel = document.getElementById('gwpSlider');
const container = carousel.parentElement;
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let currentIndex = 0;
carousel.addEventListener('mousedown', (e) => {
isDragging = true;
startPos = getPositionX(e);
carousel.classList.add('grabbing');
animationID = requestAnimationFrame(animation);
});
window.addEventListener('mouseup', () => {
if (!isDragging) return;
isDragging = false;
cancelAnimationFrame(animationID);
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -100 && currentIndex < carousel.children.length - settings.PerView) currentIndex += 1;
if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
setPositionByIndex();
carousel.classList.remove('grabbing');
});
carousel.addEventListener('mousemove', (e) => {
if (!isDragging) return;
currentTranslate = prevTranslate + getPositionX(e) - startPos;
cancelAnimationFrame(animationID);
animationID = requestAnimationFrame(animation);
});
function getPositionX(e) {
return e.pageX;
}
function animation() {
setCarouselPosition();
}
function setCarouselPosition() {
carousel.style.transform = `translateX(${currentTranslate}px)`;
}
$(".gwpSlider-button button").on("click",function() {
if ($(this).hasClass("gwpSlider-button-next")) {
currentIndex++;
if ((carousel.children.length - settings.PerView) < currentIndex) {
currentIndex = 0;
}
}else {
currentIndex--;
if (currentIndex <= 0) {
currentIndex = 0;
}
}
const slideWidth = container.offsetWidth / settings.PerView;
currentTranslate = currentIndex * -slideWidth;
prevTranslate = currentTranslate;
setCarouselPosition();
});
function setPositionByIndex() {
const slideWidth = container.offsetWidth / settings.PerView;
currentTranslate = currentIndex * -slideWidth;
prevTranslate = currentTranslate;
setCarouselPosition();
}
});
};
})( jQuery );
$(".gwpSlider").gwpSlider({
PerView:3,
margin:30
});
</script>
</body>
</html> 
