autoslider

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

0.1.4
latest
Source
npm

Version published: 6 years ago

Maintainers: 1

Created: 7 years ago

Source

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.

Keywords

FAQs

What is autoslider?

Is autoslider well maintained?

Package last updated on 27 May 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install