Lory.js 开源项目教程

最新推荐文章于 2024-09-05 09:10:01 发布

劳妍沛

最新推荐文章于 2024-09-05 09:10:01 发布

阅读量369

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00931/article/details/141914348

版权

Lory.js 开源项目教程

lory☀ Touch enabled minimalistic slider written in vanilla JavaScript.项目地址:https://gitcode.com/gh_mirrors/lo/lory

项目介绍

Lory.js 是一个轻量级的、触摸友好的轮播库，旨在提供简单而强大的轮播功能。它支持触摸滑动、鼠标拖动和键盘导航，适用于移动和桌面环境。Lory.js 的设计理念是保持代码简洁，易于集成和扩展。

项目快速启动

安装

首先，通过 npm 安装 Lory.js：

npm install lory.js --save

引入和初始化

在你的项目中引入 Lory.js，并初始化轮播：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lory.js 示例</title>
    <link rel="stylesheet" href="node_modules/lory.js/dist/lory.css">
</head>
<body>
    <div class="slider js_slider">
        <div class="frame js_frame">
            <ul class="slides js_slides">
                <li class="js_slide">Slide 1</li>
                <li class="js_slide">Slide 2</li>
                <li class="js_slide">Slide 3</li>
            </ul>
        </div>
    </div>

    <script src="node_modules/lory.js/dist/lory.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var slider = document.querySelector('.js_slider');
            lory(slider, {
                // options here
            });
        });
    </script>
</body>
</html>