{"id":21186597,"url":"https://github.com/fetchte/smoothslider","last_synced_at":"2025-12-24T16:40:48.094Z","repository":{"id":57364282,"uuid":"96267108","full_name":"fetchTe/SmoothSlider","owner":"fetchTe","description":"A Minimal Preact Carousel Slider","archived":false,"fork":false,"pushed_at":"2017-07-05T03:53:28.000Z","size":352,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-17T09:46:52.368Z","etag":null,"topics":["carousel-component","ctr","preact","slider-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fetchTe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-05T02:07:04.000Z","updated_at":"2023-07-02T12:32:50.000Z","dependencies_parsed_at":"2022-09-13T21:11:08.373Z","dependency_job_id":null,"html_url":"https://github.com/fetchTe/SmoothSlider","commit_stats":null,"previous_names":["fetchte/smoothslider","artisin/smoothslider"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2FSmoothSlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2FSmoothSlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2FSmoothSlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2FSmoothSlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fetchTe","download_url":"https://codeload.github.com/fetchTe/SmoothSlider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225608520,"owners_count":17495930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel-component","ctr","preact","slider-component"],"created_at":"2024-11-20T18:24:36.902Z","updated_at":"2025-10-28T04:16:28.196Z","avatar_url":"https://github.com/fetchTe.png","language":"JavaScript","readme":"# SmoothSlider → A Preact Carousel Slider\n\n[![npm](https://img.shields.io/npm/l/smoothslider.svg)](https://github.com/artisin/SmoothSlider/blob/master/LICENSE.txt)\n[![npm](https://img.shields.io/npm/v/smoothslider.svg)](https://www.npmjs.com/package/SmoothSlider)\n[![wercker status](https://app.wercker.com/status/a5cd2c460ebd46869b203308802dc50e/s/master \"wercker status\")](https://app.wercker.com/project/byKey/a5cd2c460ebd46869b203308802dc50e)\n[![David](https://img.shields.io/david/artisin/SmoothSlider.svg)](https://github.com/artisin/SmoothSlider/blob/master/package.json)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://media.giphy.com/media/3o7btW63p3L2au0g4E/giphy.gif\" width=\"450\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://artisin.github.io/SmoothSlider/\"\u003eOnline Demo\u003c/a\u003e\n\u003c/p\u003e\n\n\n## Description\n\nA fully responsive and simply smooth carousel slider for Preact for when you need a small 3kB alternative to React. SmoothSlider also comes prepacked with ctr that makes configuring the CSS a trivially quick matter. I created SmoothSlider as an alternative to the many bloated Jquery and hackey Javascript sliders. It’s a perfect fit if you want a simple, small, and configurable slider in your primarily HTML or Preact project.\n\n## Project Setup\n\nYou must configure and install Preact along with the jsx global pragma for babel to use SmoothSlider. Setting up both these assets is straight forward especially if you are familiar with React/Preact projects. If not, I recommend you give it a shot particularly if you're already using Babel. Check out Preact's setup documentation [here](https://preactjs.com/guide/getting-started) to get more information.\n\n\n## General Install\n\nYou can download and install the SmoothSlider component via npm of manually by cloning/downloading this repository.\n\n```bash\n   # npm install\n   yarn add smoothslider\n```\n\n```bash\n   # github download\n   git clone https://github.com/artisin/SmoothSlider\n```\n\n## JavaScript Use\n\nSmoothSlider has two import components and you will have to import both of them. The first is `SmoothSlider`, this component is the slider container and logic that configures the buttons, interval time, click events, and the other logic needed to use the Slider. The second component is the `SmoothSlide` which handles the individual logic for each slide of the slider.\n\n__`SmoothSlider` Props__\n\n+ `interval={\u003cnum\u003e}` → Time interval to change to the next slide in milliseconds - the default is `6000`.\n+ `currentSlide={\u003cnum\u003e}` → The starting slide, which starts at `0` and is the default. If you want you the slider to start on the second slide use `1`.\n\n__`SmoothSlide` Props__\n\n+ `img={\u003c...\u003e}` → Your image asset or path depending on you build pipeline.\n+ `title={\u003cstr\u003e}` → The title (h4) description for the slide in question.\n+ `description={\u003cstr\u003e}` → The text (p) description for the slide in question. You can also place within the component to take advantage of the default description property.\n+ `background={\u003cstr\u003e}` → A custom background style value for a specific slide otherwise it defaults to the set CSS\n+ `color={\u003cstr\u003e}` → Custom color style value for a specific slide that targets both the title and description otherwise it defaults to the set CSS\n+ `descriptionStyles={\u003cobj\u003e}` → Custom styles for a specific description slide\n+ `textStyles={\u003cobj\u003e}` → Custom styles for the text, both the title and description for a specific slide\n+ `h4Styles={\u003cobj\u003e}` → Custom styles for the title (h4) for a specific slide\n+ `pStyles={\u003cobj\u003e}` → Custom styles for the description (p) for a specific slide\n\n\n\n```js\n// Import Preact and SmoothSlider, SmoothSlide assets\nimport { h, render } from 'preact';\nimport { SmoothSlider, SmoothSlide } from 'smoothslider';\n//css assets (npm install)\n//import 'SmoothSlider/component/styles.css';\n\n//custom desciption styles other than background\nconst customDescriptionStyles = {\n  right: 0,\n  opacity: 0.6,\n  transform: 'translateX(100%)'\n};\nconst app = (\n  \u003cSmoothSlider\u003e\n    \u003cSmoothSlide\n      img={require('./my/img/path.jpeg')}\n      title='Smooth Slider'\u003e\n      {'Sometimes you need a smooth, simple, slider.'}\n    \u003c/SmoothSlide\u003e\n    \u003cSmoothSlide\n      img={require('./my/img/path.jpeg')}\n      title='It is Simple'\n      descriptionStyles={customDescriptionStyles}\u003e\n      {'No need to complicate things'}\n    \u003c/SmoothSlide\u003e\n    \u003cSmoothSlide\n      img={require('./my/img/path.jpeg')}\n      title='Slide on'\n      background='#eee'\n      color='#9b59b6'\n      description='Hope you find it of some use'\u003e\n    \u003c/SmoothSlide\u003e\n  \u003c/SmoothSlider\u003e\n);\n\nrender(app, document.getElementById('app'));\n```\n\n\n## CSS ([`ctr`](https://docs.ctr-lang.com)) Use\n\nIf you like the default styles you can just copy/paste the CSS styles that are located inside the SmoothSlider directory into your project. If you wish to easly customize the CSS you can do so through the `styles.ctr.yml` file, but to do so you either have to set up the [`ctr-loader`](https://github.com/ctr-lang/ctr-loader) in your project via webpack. Or make your desired changes in by cloning this project and running the example. If you wish to do the latter just follow the below instructions.\n\n\n```bash\n   git clone https://github.com/artisin/SmoothSlider\n   cd SmoothSlider\n   yarn install\n   yarn run dev\n```\n\nAfter you run `yarn run dev` it will boot up the example project. From here you can make your changes inside the `example/` directory to the `styles.ctr.yml`. For example to if you want to change the base accent color find and change the `accent: '#da6a6a'` key/pair value inside `styles.ctr.yml` and ctr will automatically change all the values for you. If your happy with the results just copy/paste the resulting `style.css` file located in the `example-build/` directory.\n\n---\n\nBest, te\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffetchte%2Fsmoothslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffetchte%2Fsmoothslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffetchte%2Fsmoothslider/lists"}