autoslider v0.1.4
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. |