能否使用纯CSS实现无限滚动的轮播图？

可以使用CSS Flexbox或者CSS Grid以及一些CSS动画技巧来实现一个基本的无限滚动轮播图，不需要JavaScript。以下是一种简单的实现思路：

1. **CSS Flexbox**:
- 创建一个包含所有图片的容器，设置它的布局模式为`row nowrap`，让图片排列成一行并自动换行。
- 使用`display: flex`, `overflow-x: auto` 和 `scroll-snap-type: x mandatory` 来启用水平滚动和强制滚动点（snap points）。
- 使用伪元素`::before`或`::after`模拟“无限”效果，覆盖真实内容并在适当位置放置滚动条。

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
}

.carousel-item {
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.carousel:before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% + 1px);
  height: 100%;
  width: 10px; /* 滚动条宽度 */
  background-color: transparent;
  scroll-snap-align: end;
}

2. **CSS Grid**:
- 类似于Flexbox，你需要设置Grid容器的`grid-auto-flow: dense`属性来支持无缝滚动，然后调整边界和滚动条。

.carousel {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  overflow-y: auto;
  scrollbar-width: none; /* 隐藏原生滚动条 */
}

.carousel::-webkit-scrollbar { /* WebKit内核浏览器 */
  display: none;
}

/* 添加自定义滚动条 */
.carousel::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 同样使用伪元素来模拟无限滚动 */
.carousel:after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(-1 * grid-template-columns.min(max-content));
  /* 其他相关尺寸调整 */
}

注意，这种方法在某些场景下可能不够完美，比如用户手动滚动到超出屏幕范围的部分时，可能会有些许视觉问题。因此，对于复杂的无限滚动需求，还是推荐配合JavaScript使用。