这段代码使用 Vanilla JS 创建了一个轻量级图像轮播插件，支持手动切换图片以自动幻灯片切换图片效果。它仅需原生JS而无需任何第三方插件即可轻松实现，从而保持网站的轻量级。此外该轮播代码还会支持滑块大小、样式以及轮播间隔时间的自定义。

下面展示如何用 Vanilla JS 创建轻量级图像滑块

1.首先，在网页的 head 标签中添加以下 CDN 链接，加载 Font Awesome CSS（用于箭头图标）。

<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
      referrerpolicy="no-referrer" rel="stylesheet"/>

2.现在，在网页中添加必要的 HTML 元素。包含一个容器，用于容纳图片和导航按钮。

<div class="slider-container">
    <div class="image-container">
        <img alt="image" src="./img/300.jpg">
        <img alt="image" src="./img/300(1).jpg">
        <img alt="image" src="./img/300(2).jpg">
        <img alt="image" src="./img/300(3).jpg">
        <img alt="image" src="./img/300(4).jpg">
    </div>
    <i class="fas fa-angle-double-left btn prev"></i>
    <i class="fas fa-angle-double-right btn next"></i>
</div>

3.应用以下 CSS 样式创建滑块布局、调整尺寸并处理过渡效果。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
.slider-container {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

4.最后，添加 JavaScript 代码，以启用图像导航和幻灯片功能。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
const prevEl = document.querySelector(".prev");
const nextEl = document.querySelector(".next");
const imgEls = document.querySelectorAll("img");
const imageContainerEl = document.querySelector(".image-container");
let currentImg = 1;
let timeout;

您还可以调整滑块的大小、样式和间隔时间，进一步定制滑块，以适应您的网站设计。