hella-slider v0.0.10

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.

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

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