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

autoslider

v0.1.4

Published

An extendable JavaScript (and CSS) slider contained within an object.

Downloads

4

Readme

Autoslider

Autoslider is a mostly JavaScript implementation of a slider. That being said use it only if you want a mostly JavaScript slider as a CSS slider is much more efficient on performance. This slider is inspired by the W3C Demo Slider but it has no dependences on any external CSS or JavaScript.

Note: The slider is in a working state but it is also still being worked on as right now it is a minimum viable product. Currently in the works is more customizable options and better responsive design.

Another Note: Currently this slider is mostly JavaScript because there is an accompanying CSS file. Feel free to take the dev version and change the simple CSS any way you see fit to make the slider work for you!

Example

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1shrink-to-fit=no">

        <link rel="stylesheet" href="../path/to/autoslider.min.css">
    </head>
    <body>
        <div id="i-want-my-slider-here"></div>

        <script src="../path/to/autoslider.min.js">
        <script>
            let options = {
                name: "bobs-slider",
                location: "#i-want-my-slider-here",
                dots: true,
                arrows: true,
                slides: [
                    {
                        title: "Hello World!",
                        transition: "auto-fade",
                        image: "https://www.w3schools.com/howto/img_nature_wide.jpg",
                        caption: "Nature is cool, eh?",
                    },
                    {
                        title: "Nice Fjords!",
                        transition: "auto-fade",
                        image: "https://www.w3schools.com/howto/img_fjords_wide.jpg",
                        caption: "2018 Fjord Focus",
                    },
                ]
            };

            let slider = new Autoslider(options);
            slider.init();
        </script>
    </body>
</html>

API


new autoslider([options])

To create a slider, you have to create a new instance of the Autoslider class and pass in and object of options. These options are demonstated in the example above and a description can be found in the table below.

| Type | Name | Description | Default | | ------- |----------| ----------- | ------- | | string | name | The name of your slider, it will be added as a class name to the container div. | "" | string | location | The location of where you want to put the slider. If its body just put body but if it's an id or class append the appropriate # or . to the name. | body | boolean | dots | Whether you want dots at the bottom that are used for navigation. | true | boolean | arrows | Whether you want arrows on the side that can be used for navigation. | true | Array | slides | An array of options specifying individual slide information. See below. | []


options.slides

In the options object below, slides is an array of objects that contains information about each individual slide you would like in your slider. None of these options (except the image, otherwise why use a slide) are required so just use what fits your needs. The options for the slide objects are shown in the example above or in the table below.

| Type | Name | Description | | ------- |----------| ----------- | | string | title | Add a title if you would like a large heading on your slide. | | string | caption | The text that is shown beneath the title. | | string | image | The url to retrieve the image from. | | string | transition | Specify a CSS class to use for transitions if desired. Autoslider comes with .auto-fade in the CSS file as an example. You can freely create your own CSS transitions and specify the class name here. |


autoslider.init()

After creating a new instance of an autoslider, calling init will create the slider elements and add them to the DOM.


autoslider.next()

Calling this method anywhere after initializing the autoslider causes the slider to move to the next slide in order.


autoslider.prev()

Calling this method anywhere after initializing the autoslider causes the slider to move to the previous slide in order.


autoslider.slide(index)

This method takes in an index as a parameter which is just which slide you want to go to.

| Type | Name | Description | | ------- |----------| ----------- | | number | index | Skip to a specific slide. |