@sliderly/core v1.0.7

Sliderly

A modern touch slider library that uses custom attributes for configuration, making it perfect for Webflow and other platforms.

Quick Start

1. Add Sliderly to your project:

<!-- Add via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sliderly/core@latest/dist/sliderly-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/@sliderly/core@latest/dist/sliderly-bundle.min.js"></script>

<!-- Or install via npm -->
npm install @sliderly/core

2. Create your slider:

<sliderly direction="horizontal" loop="true">
  <div sliderly="component">
    <div sliderly="wrapper">
      <div sliderly="slide">Slide 1</div>
      <div sliderly="slide">Slide 2</div>
      <div sliderly="slide">Slide 3</div>
    </div>
  </div>
  <div sliderly="thumbnail-component">
    <div sliderly="thumbnail-wrapper">
      <div sliderly="thumbnail-slide">Slide 1</div>
      <div sliderly="thumbnail-slide">Slide 2</div>
      <div sliderly="thumbnail-slide">Slide 3</div>
    </div>
  </div>
  <div sliderly="button-next"></div>
  <div sliderly="button-prev"></div>
  <div sliderly="pagination"></div>
</sliderly>

That's it! Sliderly will automatically initialize and create your slider.

Features

• 🎯 Custom attributes for easy configuration
• 🎨 Beautiful transitions and effects
• 📱 Touch-friendly and responsive
• ⚡ Lightweight and performant
• 🔌 No JavaScript configuration needed
• 🎉 Perfect for Webflow

Documentation

• Configuration Guide - Detailed attribute reference
• Examples - Live examples and code
• API Reference - Advanced JavaScript API

Browser Support

Sliderly supports all modern browsers:

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)

License

MIT License

Community

The sliderly community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects

Our Code of Conduct applies to all sliderly community channels.

Dist / Build

On production use files (JS and CSS) only from dist/ folder, there will be the most stable versions.

Development Build

Install all dependencies, in repo's root:

$ npm install

And build development version of sliderly:

$ npm run build

The result is available in dist/ folder.

Running demos:

All demos located in ./playground folder. There you will find Core (HTML, JS), React, Vue versions. To open demo, run:

• Core: npm run core
• React: npm run react
• Vue: npm run vue

Production Build

$ npm run build:prod

Production version will available in dist/ folder.

Contributing

All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.

Major Roadmapped Features

-- Coming Soon