Hella rad image slider.

Usage no npm install needed!

<script type="module">
  import hellaSlider from 'https://cdn.skypack.dev/hella-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.


  • 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">
            <img src="http://hella.babylonandting.com/first.jpg"/>
            <figcaption>Caption One</figcaption>
            <img src="http://hella.babylonandting.com/second.jpg"/>
            <figcaption>Caption Two</figcaption>
            <img src="http://hella.babylonandting.com/third.jpg"/>
            <figcaption>Caption Three</figcaption>
    <div class="hella-slider-controls">
        <div class="hella-button hella-slider-prev">
            <i class="fas fa-chevron-left"></i>
        <div class="hella-caption-display-slot"></div>
        <div class="hella-button hella-slider-next">
            <i class="fas fa-chevron-right"></i>


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