时间戳

首页 > 解决方案 > 仅使用 HTML 和 CSS 构建轮播

html - 仅使用 HTML 和 CSS 构建轮播

问题描述

我想构建一个基于纯 CSS 和 HTML 的响应式轮播。我正在尝试按照此模板对其进行建模，但不希望它使用任何 Javascript 或 JQuery。

这是我到目前为止所拥有的：

代码笔

我想让轮播在单击上一个和下一个按钮时旋转幻灯片，并且每 5 秒自动旋转一次幻灯片。

<a class="carousel-control-prev" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="carousel-control-next" role="button" data-slide="next">
    <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

标签： htmlcss

解决方案

如果你想在轮播中使用 HTML 和 CSS，你至少需要一个 javascript 作为按钮。但如果你坚持，你可以试试Boostrap Carousel。它非常易于使用，您不需要任何 javascript。

推荐阅读