Html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="gwpSlider.css">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="gwpSlider.js"></script>
</head>
<body>
<div class="gwpSlider">
<div id="gwpSlider" class="gwpSlider-container">
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
<div class="gwpSlider-item" >
<img src="https://webiay.com/xxx/assets/images/miami.webp">
</div>
</div>
<div class="gwpSlider-button">
<button class="gwpSlider-button-prev">
Önceki
</button>
<button class="gwpSlider-button-next">
Sonraki
</button>
</div>
</div>
<script>
$(".gwpSlider").gwpSlider({PerView:5});
</script>
</body>
</html>Css Dosyam : img {
width:100%;
height:300px;
}
.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:30px;
margin: 0;
}Javascript dosyam : (function($) {
$.fn.gwpSlider = function(options) {
const settings = $.extend({
PerView: 1,
margin: 10,
auto: false,
autoTime: 10000,
pagination: true,
navigation: true
}, options);
return this.each(function() {
if (settings.PerView <= 1) {
settings.margin = 0;
}
const $this = $(this);
const sliderId = $this.find(".gwpSlider-container").attr("id");
const carousel = document.getElementById(sliderId);
const container = carousel.parentElement;
const itemSelector = ".gwpSlider-item";
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let currentIndex = 0;
const slideWidth = $this.width() / settings.PerView;
const sliderTotalWidth = (slideWidth * $this.find(itemSelector).length) + settings.margin;
$this.find(".gwpSlider-container").width(sliderTotalWidth);
$this.find(itemSelector).css({
"width": slideWidth - settings.margin,
"margin-right": settings.margin
});
const marginLeftx = settings.margin / (settings.PerView - 1);
for (let i = 1; i <= settings.PerView; i++) {
if (i > 1) {
$this.find(`${itemSelector}:nth-child(${i})`).css("margin-left", marginLeftx);
}
}
const updateCarouselPosition = () => carousel.style.transform = `translateX(${currentTranslate}px)`;
const setPositionByIndex = () => {
currentTranslate = currentIndex * -(container.offsetWidth / settings.PerView);
prevTranslate = currentTranslate;
updateCarouselPosition();
const currentIndexx = currentIndex + 1;
const marginLeft = settings.margin / (settings.PerView - 1);
const i = 0;
$this.find(itemSelector).css("margin-left", "0");
for (let i = currentIndexx; i <= (currentIndex + settings.PerView); i++) {
if (currentIndexx < i) {
$this.find(`${itemSelector}:nth-child(${i})`).css("margin-left", marginLeft);
}
}
const lastChild = (i - 1);
$this.find(itemSelector).removeClass("gwpSliderEnd");
$this.find(`${itemSelector}:nth-child(${lastChild})`).addClass("gwpSliderEnd");
};
const handleCarouselEvents = (e) => {
switch (e.type) {
case 'mousedown':
isDragging = true;
startPos = e.pageX;
carousel.classList.add('grabbing');
animationID = requestAnimationFrame(updateCarouselPosition);
break;
case 'mouseup':
if (!isDragging) return;
isDragging = false;
cancelAnimationFrame(animationID);
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -100 && currentIndex < carousel.children.length - settings.PerView) currentIndex++;
if (movedBy > 100 && currentIndex > 0) currentIndex--;
setPositionByIndex();
carousel.classList.remove('grabbing');
break;
case 'mousemove':
if (!isDragging) return;
currentTranslate = prevTranslate + e.pageX - startPos;
cancelAnimationFrame(animationID);
animationID = requestAnimationFrame(updateCarouselPosition);
break;
}
};
['mousedown', 'mouseup', 'mousemove'].forEach(evt =>
carousel.addEventListener(evt, handleCarouselEvents)
);
if (settings.navigation) {
$(".gwpSlider-button button").on("click", function() {
currentIndex += $(this).hasClass("gwpSlider-button-next") ? 1 : -1;
if ((carousel.children.length - settings.PerView) < currentIndex) currentIndex = 0;
if (currentIndex < 0) currentIndex = 0;
setPositionByIndex();
});
}
if (settings.auto) {
setInterval(() => {
currentIndex++;
if ((carousel.children.length - settings.PerView) < currentIndex) currentIndex = 0;
setPositionByIndex();
}, settings.autoTime);
}
if (settings.pagination) {
const pageNum = Math.floor(carousel.children.length / settings.PerView);
const $pagination = $("<div class='gwpPagination'></div>").appendTo($this);
for (let i = 0; i < pageNum; i++) {
$pagination.append($("<span></span>").attr('page', i));
}
$pagination.on("click", "span", function() {
currentIndex = settings.PerView * $(this).attr("page");
setPositionByIndex();
});
}
const handleStart = (e) => {
if (e.type === 'touchstart') e.preventDefault();
isDragging = true;
startPos = getPosX(e);
carousel.classList.add('grabbing');
animationID = requestAnimationFrame(updateCarouselPosition);
};
const handleEnd = () => {
if (!isDragging) return;
isDragging = false;
cancelAnimationFrame(animationID);
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -100 && currentIndex < carousel.children.length - settings.PerView) currentIndex++;
if (movedBy > 100 && currentIndex > 0) currentIndex--;
setPositionByIndex();
carousel.classList.remove('grabbing');
};
const handleMove = (e) => {
if (!isDragging) return;
currentTranslate = prevTranslate + getPosX(e) - startPos;
cancelAnimationFrame(animationID);
animationID = requestAnimationFrame(updateCarouselPosition);
};
const getPosX = (e) => e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
['mousedown', 'touchstart'].forEach(evt =>
carousel.addEventListener(evt, handleStart)
);
['mouseup', 'touchend'].forEach(evt =>
carousel.addEventListener(evt, handleEnd)
);
['mousemove', 'touchmove'].forEach(evt =>
carousel.addEventListener(evt, handleMove)
);
});
};
})(jQuery); 