hella-slider/README.md

Hella rad image slider.

# Hella Slider

A hella rad image slider for web applications.

- No HTML generated by JS
- No CSS generated by JS
- No JQuery
- Bare minimum extra markup, CSS, and JS
- Basic, designed for individual styling

Full documentation and demos [here](http://hella.babylonandting.com).

### Defaults

- Mobile, swipe enabled by default
- Default width of container is 100% of parent (feel free to set the container width yourself)
- Default height of container is set to height of tallest image
- Buttons and caption can be moved wherever and styled however
- Hella Slider will not resize your images

[<img src="http://hella.babylonandting.com/sample-4.jpg">](http://hella.babylonandting.com/)

[<img src="http://hella.babylonandting.com/sample-3.jpg">](http://hella.babylonandting.com/)

### Starter markup
``` 
<div class="hella-slider">
    <div class="hella-slider-images hella-smooth-transition">
        <figure>
            <img src="http://hella.babylonandting.com/first.jpg"/>
            <figcaption>Caption One</figcaption>
        </figure>
        <figure>
            <img src="http://hella.babylonandting.com/second.jpg"/>
            <figcaption>Caption Two</figcaption>
        </figure>
        <figure>
            <img src="http://hella.babylonandting.com/third.jpg"/>
            <figcaption>Caption Three</figcaption>
        </figure>
    </div>
    <div class="hella-slider-controls">
        <div class="hella-button hella-slider-prev">
            <i class="fas fa-chevron-left"></i>
        </div>
        <div class="hella-caption-display-slot"></div>
        <div class="hella-button hella-slider-next">
            <i class="fas fa-chevron-right"></i>
        </div>
    </div>
</div>
```

### Transitions

Add a `hella-smooth-transition` class to the container for a standard wipe.

Feel free to override the CSS rules to your liking.  Here is the default:

```
.hella-smooth-transition {
  transition:all .5s ease-in-out;  
}
```

### Installation & Setup

Clone the repo or run `npm i hella-slider`

Include the package's `hella-slider.min.js` and `hella-slider.min.css` in your project files.

Alternatively, you can include the SASS and ES6 files.

In a Node env: `require('hella-slider/hella-slider');`

In a SASS env: `@import '~hella-slider/hella-slider';`

Works best with [Fontawesome icons](https://github.com/FortAwesome/Font-Awesome)