https://github.com/exequeryphil/hella-slider

Hella Slider

• No HTML generated by JS
• No CSS generated by JS
• Minimal markup, CSS, and JS
• Basic, designed for individual styling
• Of course, no JQuery

Defaults

• Mobile, swipe enabled by default
• Default width of container is 100% of parent (feel free 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.

<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>

Simple CSS modifications

.hella-slider {
  width:800px;
}
.hella-slider-prev, .hella-slider-next {
  position:absolute;
  top:40%;
  background-color:black;
  color:white;
}
.hella-button {
  border-radius:50%;
}
.hella-caption-display-slot {
  position:absolute;
  bottom:10px;
  text-align:left;
  background-color:rgba(0,0,0,0.5);
  color:white;
}

Transitions

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

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

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

Mobile

By default there is only one breakpoint, at 900px

Setup

Clone the repo or run npm i hella-slider

Include the files hella-slider.min.css and hella-slider.min.js in your project. Alternatively, you can use the SASS and ES6 files.

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

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

This slider works hella nice with Fontawesome icons.