📌  相关文章
📜  splide cdn - Html (1)

📅  最后修改于: 2023-12-03 14:47:32.070000             🧑  作者: Mango

Splide CDN - HTML

介绍

Splide 是一个轻量级的响应式轮播组件，使用简单，并且可以通过使用 Splide CDN 轻松地将其集成到您的 HTML 项目中。

Splide CDN 示例

在以下示例中，我们将展示如何使用 Splide CDN 将 Splide 轮播组件添加到您的 HTML 页面中。

<!DOCTYPE html>
<html>
<head>
    <!-- 引入 Splide 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/@splidejs/splide@3.4.13/dist/css/splide.min.css">

    <!-- 引入 Splide 的 JavaScript 文件 -->
    <script src="https://unpkg.com/@splidejs/splide@3.4.13/dist/js/splide.min.js"></script>
</head>
<body>
    <!-- 创建一个包含轮播项的容器 -->
    <div id="splide" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">Slide 1</li>
                <li class="splide__slide">Slide 2</li>
                <li class="splide__slide">Slide 3</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Splide('#splide').mount();
        });
    </script>
</body>
</html>
如何使用 Splide CDN

以下是使用 Splide CDN 的步骤：

  1. 将 Splide 的 CSS 文件添加到 <head> 标签中。
<link rel="stylesheet" href="https://unpkg.com/@splidejs/splide@3.4.13/dist/css/splide.min.css">
  1. 将 Splide 的 JavaScript 文件添加到 <head> 或 <body> 标签中。
<script src="https://unpkg.com/@splidejs/splide@3.4.13/dist/js/splide.min.js"></script>
  1. 创建一个包含轮播项的容器。
<div id="splide" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 1</li>
            <li class="splide__slide">Slide 2</li>
            <li class="splide__slide">Slide 3</li>
        </ul>
    </div>
</div>
  1. 在 JavaScript 文件中初始化 Splide 轮播组件。
<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Splide('#splide').mount();
    });
</script>
参考链接