npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

smoothslider

v0.1.0

Published

A Minimal Preact Carousel Slider

Downloads

4

Readme

SmoothSlider → A Preact Carousel Slider

npm npm wercker status David

Description

A 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.

Project Setup

You 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 to get more information.

General Install

You can download and install the SmoothSlider component via npm of manually by cloning/downloading this repository.

   # npm install
   yarn add smoothslider
   # github download
   git clone https://github.com/artisin/SmoothSlider

JavaScript Use

SmoothSlider 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.

SmoothSlider Props

  • interval={<num>} → Time interval to change to the next slide in milliseconds - the default is 6000.
  • currentSlide={<num>} → 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.

SmoothSlide Props

  • img={<...>} → Your image asset or path depending on you build pipeline.
  • title={<str>} → The title (h4) description for the slide in question.
  • description={<str>} → The text (p) description for the slide in question. You can also place within the component to take advantage of the default description property.
  • background={<str>} → A custom background style value for a specific slide otherwise it defaults to the set CSS
  • color={<str>} → Custom color style value for a specific slide that targets both the title and description otherwise it defaults to the set CSS
  • descriptionStyles={<obj>} → Custom styles for a specific description slide
  • textStyles={<obj>} → Custom styles for the text, both the title and description for a specific slide
  • h4Styles={<obj>} → Custom styles for the title (h4) for a specific slide
  • pStyles={<obj>} → Custom styles for the description (p) for a specific slide
// Import Preact and SmoothSlider, SmoothSlide assets
import { h, render } from 'preact';
import { SmoothSlider, SmoothSlide } from 'smoothslider';
//css assets (npm install)
//import 'SmoothSlider/component/styles.css';

//custom desciption styles other than background
const customDescriptionStyles = {
  right: 0,
  opacity: 0.6,
  transform: 'translateX(100%)'
};
const app = (
  <SmoothSlider>
    <SmoothSlide
      img={require('./my/img/path.jpeg')}
      title='Smooth Slider'>
      {'Sometimes you need a smooth, simple, slider.'}
    </SmoothSlide>
    <SmoothSlide
      img={require('./my/img/path.jpeg')}
      title='It is Simple'
      descriptionStyles={customDescriptionStyles}>
      {'No need to complicate things'}
    </SmoothSlide>
    <SmoothSlide
      img={require('./my/img/path.jpeg')}
      title='Slide on'
      background='#eee'
      color='#9b59b6'
      description='Hope you find it of some use'>
    </SmoothSlide>
  </SmoothSlider>
);

render(app, document.getElementById('app'));

CSS (ctr) Use

If 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 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.

   git clone https://github.com/artisin/SmoothSlider
   cd SmoothSlider
   yarn install
   yarn run dev

After 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.


Best, te