solidjs-swiper


A simple image swiper built in Solid-JS. This is not Swiper.js ! it's a custom package inspired by swiper.js

Demo here: https://codesandbox.io/s/solidjs-swiper-demo-2r25of?file=/src/App.tsx

Install

``bash
npm install solidjs-swiper
`

`bash
yarn add solidjs-swiper
`

Usage example

`tsx
import { createSignal, Component } from 'solid-js';
import { OnReadyApi, Swiper } from 'solidjs-swiper';

const App: Component = () => {
// You can specity the type of each item here. Optional. Works evem witout it.
const demoImages = [
{ img: 'https://picsum.photos/id/10/400/200' },
{ img: 'https://picsum.photos/id/1/400/200' },
{ img: 'https://picsum.photos/id/100/400/200' },
{ img: 'https://picsum.photos/id/101/400/200' },
];

const [pictures, setPictures] = createSignal(demoImages);
const [index, setIndex] = createSignal(0);
let swiperApi: OnReadyApi;
setTimeout(() => swiperApi?.next(), 1600);
setTimeout(() => swiperApi?.prev(), 2000);

return (



);
};
export default App;
`

Roadmap:

| | |
| :------- | :------------------------------------------------- |
| ✅ | First version out 🎉🥳 |
| ✅ | Export api with prev and next methods |
| ✅ | Add onChange` event |
| ☐ | Autoplay with delay config and stop on interaction |
| ☐ | Support for loop |

Changelog

$3

- Migrated from rollup to tsup-preset-solid

$3

- Fixed onMouseLeave bug

$3

- Type-safety for props and children item.
Heavy inspiration from solid's For component. Thank you solidjs !