Jekyll（适配GitHub Pages）：如何创建Div轮播组件？

当然可以用<div>元素创建轮播——图片轮播只是最常见的场景，轮播的核心是控制元素的显示/隐藏或位移，完全可以把图片替换成任意<div>内容（文本、按钮、列表甚至混合内容都可以）。下面给你两种适配GitHub Pages Jekyll环境的实现方案：

不需要JS，适合静态场景，完全兼容GitHub Pages的安全限制：

1. HTML结构（可结合Jekyll Liquid语法动态生成轮播项）

<div class="carousel-container">
  <!-- 隐藏的单选按钮，用于控制轮播切换 -->
  <input type="radio" name="carousel" id="slide1" checked>
  <input type="radio" name="carousel" id="slide2">
  <input type="radio" name="carousel" id="slide3">

  <!-- 轮播内容容器 -->
  <div class="carousel-slides">
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>自定义内容1</h3>
        <p>这是第一个<div>轮播项的文本内容，还可以放按钮、列表等任意元素</p>
      </div>
    </div>
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>自定义内容2</h3>
        <ul>
          <li>列表项1</li>
          <li>列表项2</li>
        </ul>
      </div>
    </div>
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>自定义内容3</h3>
        <button>点击触发操作</button>
      </div>
    </div>
  </div>

  <!-- 轮播指示器 -->
  <div class="carousel-indicators">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

2. 对应的CSS样式

.carousel-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* 隐藏单选按钮 */
.carousel-container input[type="radio"] {
  display: none;
}

.carousel-slides {
  display: flex;
  width: 300%; /* 3个轮播项对应300%宽度，数量变化时要调整 */
  transition: transform 0.5s ease;
}

.carousel-slide {
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

/* 根据选中的单选按钮切换轮播位置 */
#slide2:checked ~ .carousel-slides {
  transform: translateX(-100%);
}

#slide3:checked ~ .carousel-slides {
  transform: translateX(-200%);
}

/* 指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.carousel-indicators label {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

/* 选中状态的指示器样式 */
#slide1:checked ~ .carousel-indicators label[for="slide1"],
#slide2:checked ~ .carousel-indicators label[for="slide2"],
#slide3:checked ~ .carousel-indicators label[for="slide3"] {
  background: rgba(255,255,255,1);
}

适合需要自动轮播、左右箭头控制的复杂场景，用内联JS即可（GitHub Pages允许内联JS）：

1. HTML结构

<div class="js-carousel-container">
  <div class="js-carousel-slides">
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>自动轮播内容1</h3>
        <p>支持自动切换，也可以用箭头手动控制</p>
      </div>
    </div>
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>自动轮播内容2</h3>
        <img src="/images/sample.jpg" alt="示例图片"> <!-- 可混合图片与文本 -->
      </div>
    </div>
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>自动轮播内容3</h3>
        <a href="#internal-link">站内跳转链接</a>
      </div>
    </div>
  </div>

  <!-- 控制箭头 -->
  <button class="carousel-arrow prev-arrow">&lt;</button>
  <button class="carousel-arrow next-arrow">&gt;</button>

  <!-- 动态生成的指示器容器 -->
  <div class="js-carousel-indicators"></div>
</div>

2. CSS样式

.js-carousel-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.js-carousel-slides {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  min-width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1.2rem;
}

.prev-arrow { left: 1rem; }
.next-arrow { right: 1rem; }

.js-carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.indicator-dot.active {
  background: rgba(255,255,255,1);
}

3. 内联JS（放在页面底部的<script>标签里）

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.js-carousel-container');
  const slides = container.querySelector('.js-carousel-slides');
  const slideItems = container.querySelectorAll('.carousel-slide');
  const prevBtn = container.querySelector('.prev-arrow');
  const nextBtn = container.querySelector('.next-arrow');
  const indicatorsContainer = container.querySelector('.js-carousel-indicators');
  
  let currentIndex = 0;
  const slideCount = slideItems.length;
  const slideWidth = slideItems[0].offsetWidth;

  // 动态生成指示器
  slideItems.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.classList.add('indicator-dot');
    if (index === 0) dot.classList.add('active');
    dot.addEventListener('click', () => goToSlide(index));
    indicatorsContainer.appendChild(dot);
  });
  const indicators = indicatorsContainer.querySelectorAll('.indicator-dot');

  // 切换到指定轮播项
  function goToSlide(index) {
    currentIndex = index;
    slides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
    // 更新指示器状态
    indicators.forEach((dot, i) => {
      dot.classList.toggle('active', i === currentIndex);
    });
  }

  // 下一个轮播项
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    goToSlide(currentIndex);
  }

  // 上一个轮播项
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    goToSlide(currentIndex);
  }

  // 绑定按钮事件
  prevBtn.addEventListener('click', prevSlide);
  nextBtn.addEventListener('click', nextSlide);

  // 自动轮播（可选，可注释掉关闭）
  setInterval(nextSlide, 5000); // 每5秒切换一次
});

Jekyll适配提示 #

如果轮播内容需要从Jekyll数据源生成，比如_data/carousel.yml，可以用Liquid循环动态渲染：

<div class="carousel-slides">
  {% for item in site.data.carousel %}
    <div class="carousel-slide">
      <div class="slide-content">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  {% endfor %}
</div>

内容的提问来源于stack exchange，提问作者shakedzy