如何使用Chocolat JS实现自动开启的全屏循环图片轮播？

要实现自动开启+循环播放的全屏轮播，你需要在现有配置的基础上，调用Chocolat的实例方法来触发自动打开和定时切换，结合已有的loop: true配置就能完成需求。以下是完整的实现方案：

完整代码示例 #

HTML 部分（可保留你的原有结构） #

<div class="chocolat-parent" data-chocolat-title="My Fullscreen Slideshow">
  <a class="chocolat-image" href="series/1.jpg" title="Caption for Image 1">
    <img class="chocolat-open" width="100" src="series/1.jpg" />
  </a>
  <a class="chocolat-image" href="series/2.jpg" title="Caption for Image 2">
    <img width="100" src="series/2.jpg" />
  </a>
  <a class="chocolat-image" href="series/3.jpg" title="Caption for Image 3">
    <img width="100" src="series/3.jpg"/>
  </a>
</div>

JavaScript 部分（核心修改） #

$(document).ready(function(){
  // 1. 初始化Chocolat并获取实例引用
  const chocolatSlideshow = $('.chocolat-parent').Chocolat({
    loop: true,               // 开启循环（到达最后一张后回到第一张）
    imageSize: 'cover',       // 图片全屏覆盖容器
    fullScreen: true,         // 强制开启全屏模式
    duration: 800             // 图片切换动画时长（可选，单位：ms）
  }).data('chocolat');        // 通过data方法获取Chocolat实例

  // 2. 页面加载完成后自动打开轮播
  chocolatSlideshow.open();

  // 3. 设置定时自动切换（每隔5秒切换到下一张，可自定义时长）
  setInterval(() => {
    chocolatSlideshow.next();
  }, 5000);
});

关键细节解释 #

1. 获取Chocolat实例
   初始化后通过.data('chocolat')获取实例对象，这样才能调用Chocolat内置的open()（打开轮播）和next()（切换到下一张）方法。

2. 强制全屏
   添加fullScreen: true配置项，确保轮播打开后直接进入全屏模式，满足你的全屏需求。

3. 自动开启轮播
   调用chocolatSlideshow.open()，不需要用户点击缩略图，页面加载完成后自动启动轮播。

4. 定时循环切换
   使用setInterval定时调用next()方法，结合loop: true的配置，当播放到最后一张图片时会自动跳回第一张，形成无限循环。你可以根据需求调整定时器的间隔时间（比如把5000改成3000就是3秒切换一次）。

可选优化（隐藏缩略图） #

如果不需要页面上显示缩略图，可以给.chocolat-parent添加CSS样式，让它隐藏：

.chocolat-parent {
  display: none;
}

这样页面上就不会显示小缩略图，直接自动播放全屏轮播。

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