SOURCE

document.addEventListener('DOMContentLoaded', () => {
    const wrapper = document.querySelector('.swiper-wrapper');
    const slides = document.querySelectorAll('.swiper-slide');
    const pagination = document.querySelector('.swiper-pagination');

    let currentIndex = 0;
    const slideCount = slides.length;
    let startX = 0; // 记录开始拖拽的坐标
    let currentTranslate = 0; // 当前滑块的偏移量
    let isDragging = false; // 是否处于拖拽状态

    // 初始化分页指示器
    slides.forEach((_, index) => {
        const bullet = document.createElement('div');
        bullet.className = 'swiper-pagination-bullet';
        if (index === 0) bullet.classList.add('active');
        bullet.addEventListener('click', () => goToSlide(index));
        pagination.appendChild(bullet);
    });

    // 切换到指定 slide
    function goToSlide(index) {
        currentIndex = index;
        currentTranslate = -index * window.innerWidth;
        wrapper.style.transition = 'transform 0.3s ease';
        wrapper.style.transform = `translateX(${currentTranslate}px)`;
        updatePagination();
    }

    // 更新分页指示器状态
    function updatePagination() {
        document.querySelectorAll('.swiper-pagination-bullet').forEach((bullet, index) => {
            bullet.classList.toggle('active', index === currentIndex);
        });
    }

    // 处理拖拽开始
    function handleDragStart(event) {
        startX = event.type === 'mousedown' ? event.pageX : event.touches[0].clientX;
        isDragging = true;
        wrapper.style.transition = 'none'; // 取消动画，保证拖拽流畅
    }

    // 处理拖拽过程
    function handleDragMove(event) {
        if (!isDragging) return;
        const currentX = event.type === 'mousemove' ? event.pageX : event.touches[0].clientX;
        const deltaX = currentX - startX;
        wrapper.style.transform = `translateX(${currentTranslate + deltaX}px)`;
    }

    // 处理拖拽结束
    function handleDragEnd(event) {
        if (!isDragging) return;
        isDragging = false;
        const endX = event.type === 'mouseup' ? event.pageX : event.changedTouches[0].clientX;
        const deltaX = endX - startX;

        // 判断滑动距离是否超过 1/4 滑块宽度，决定是否切换滑块
        if (deltaX > window.innerWidth / 4 && currentIndex > 0) {
            goToSlide(currentIndex - 1); // 向右滑
        } else if (deltaX < -window.innerWidth / 4 && currentIndex < slideCount - 1) {
            goToSlide(currentIndex + 1); // 向左滑
        } else {
            goToSlide(currentIndex); // 回弹到当前滑块
        }
    }

    // 绑定事件 (PC 端)
    wrapper.addEventListener('mousedown', handleDragStart);
    window.addEventListener('mousemove', handleDragMove);
    window.addEventListener('mouseup', handleDragEnd);

    // 绑定事件 (移动端)
    wrapper.addEventListener('touchstart', handleDragStart);
    window.addEventListener('touchmove', handleDragMove);
    window.addEventListener('touchend', handleDragEnd);
});

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="background-color: #42b983;">Slide 1</div>
		<div class="swiper-slide" style="background-color: #ff6f61;">Slide 2</div>
		<div class="swiper-slide" style="background-color: #6a5acd;">Slide 3</div>
		<div class="swiper-slide" style="background-color: #ffa500;">Slide 4</div>
	</div>
	<div class="swiper-pagination"></div>
</div>

/* Swiper 容器 */

.swiper-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
}


/* 滑动区域 */

.swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}


/* 单个滑块 */

.swiper-slide {
    min-width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}


/* 分页指示器 */

.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background-color 0.3s;
}

.swiper-pagination-bullet.active {
    background-color: #42b983;
}