Butter Slider 使用指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00150/article/details/142123760

Butter Slider 使用指南

butter-slider ❗️PROJECT UNMAINTAINED❗️ 🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦 项目地址: https://gitcode.com/gh_mirrors/bu/butter-slider

项目介绍

Butter Slider 是一个轻量级、简单且不依赖任何库的 Vanilla JS 拖拽式滑块组件。它设计用于提供简单的设置体验，并强调了其平滑的交互性和基础性。尽管此项目目前不再维护，其历史版本仍可用于那些寻求基本滑块功能的开发者。请注意，由于性能和代码质量的考虑，官方建议寻找替代方案或自行动手调整。

特点：

零依赖：纯JavaScript实现。
易集成：支持NPM、Yarn及CDN多种引入方式。
易于定制：允许通过API进行配置和操作。

快速启动

要立即开始使用 Butter Slider，你可以选择适合你的引入方式。

通过NPM安装

npm i --save butter-slider

或者如果你偏好Yarn：

yarn add butter-slider

接下来，在你的JavaScript文件中引入并创建滑块实例：

import { CreateSlider } from 'butter-slider';

const mySlider = new CreateSlider({
    container: 'slider-container', // 监听事件的容器
    slider: 'slider-items',       // 移动的目标元素
});

// 假设有一个箭头按钮来控制滑动
document.getElementById('arrow').addEventListener('click', () => {
    mySlider.setRelativePosition(500); // 每次点击箭头移动500px
});

CDN 引入（适用于Webflow或其他不打包项目）

在HTML文件中加入以下脚本标签以直接使用：

<script src="https://unpkg.com/butter-slider"></script>

随后可通过JavaScript直接创建滑块：

new butterSlider.CreateSlider({
    container: 'slider-container',
    slider: 'slider-items',
});

应用案例与最佳实践

虽然这个项目未维护可能导致一些限制，但在简单的网页布局或小型项目中，Butter Slider依然可以作为一个快速上手的滑块解决方案。最佳实践包括确保你的滑块容器具有合适的CSS样式，以适应滑块的正确显示和交互效果。比如，确保容器宽度足够并且相对定位，滑块内部的内容应能够响应滑动动作。

示例代码片段

假设你有一个带有两幅图片的滑块：

<div id="slider-container">
    <div id="slider-items">
        <img src="image1.jpg" alt="Slide 1">
        <img src="image2.jpg" alt="Slide 2">
    </div>
</div>

<script>
    const slider = new butterSlider.CreateSlider({ 
        container: '#slider-container', 
        slider: '#slider-items'
    });
</script>