Swipeable Horizontal Slider In JavaScript

Preview:

Description:

A mobile-first JavaScript slider component to create a horizontal slider where you can switch between slides with touch and drag events.

Ideal for blog post list, image gallery, product showcase, and much more.

How to use it:

1. Download the package and import the component.

import { CreateSlider } from './slider.js"
// OR
<script src="./dist/index.js"></script>

2. Create the HTML for the horizontal slider.

<div class="slider">
 <div class="slides">
  <div class="slide">
    <div class="logo"></div>
    <div class="divider"></div>
    <h5 class="title"><a href="#">Item 1</a></h5>
    <p class="content">
      Description 1
    </p>
  </div>
  <div class="slide">
    <div class="logo"></div>
    <div class="divider"></div>
    <h5 class="title"><a href="#">Item 2</a></h5>
    <p class="content">
      Description 2
    </p>
  </div>
  <div class="slide">
    <div class="logo"></div>
    <div class="divider"></div>
    <h5 class="title"><a href="#">Item 3</a></h5>
    <p class="content">
      Description 3
    </p>
  </div>
  ...
 </div>
</div>

3. Create a progress bar to indicator on which slides you’re viewing.

<div class="progress">
  <div class="bar"></div>
</div>

4. Initialize the slider and done.

const mySlider = new CreateSlider({
      container: '.slider',
      slider: '.slides'
})
// Without Import
const mySlider = new slider.CreateSlider({
      container: '.slider',
      slider: '.slides'
})>

5. Apply CSS styles to the slider.

.slider {
   width: 100vw;
   overflow-x: hidden;
}
.slider .content {
   font-size: 18px;
   line-height: 1.4;
   padding-right: 10px;
}
.slides {
   display: flex;
   will-change: transform;
   overflow-x: visible;
}
.slide {
   flex: 0 0 auto;
   width: 300px;
   margin-right: 10vw;
   user-select: none;
   padding-bottom: 35px;
}
.slide:first-of-type {
   margin-left: 10vw;
}
.slide:last-of-type {
   width: calc(300px + 10%);
   padding-right: 10%;
}
.slide .logo {
   width: 100%;
   height: 200px;
   background-color: #a0a0a0;
   margin-bottom: 30px;
}
.slide .divider {
   width: 40px;
   height: 3px;
   background-color: #252422;
   margin-bottom: 60px;
}
.slide .title {
   font-size: 25px;
   margin-bottom: 20px;
}
.progress {
   position: relative;
   height: 2px;
   width: 90%;
   background-color: #a0a0a0;
   margin-top: 20px;
   margin-bottom: 20px;
}
.bar {
   position: absolute;
   height: 2px;
   width: 0%;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: #252422;
}

7. Possible options to config the slider.

const mySlider = new CreateSlider({
      container: '.slider',
      slider: '.slides',
      noTouchEvent: true, // disables touch events
      multiplicateur: 1, // animation speed
      smoothAmount: 0.15 // How many percent of the distance is use in the LERP function
})

8. You’re also allowed to initialize the slider and pass the options via HTML data attributes:

<div class="slider" data-slider-init="plop" data-slider-plop-container>
 <div class="slides" 
      data-slider-plop-slidable
      data-slider-plop-options="multiplicateur:2,noTouchEvent:true">
  <div class="slide">
    <div class="logo"></div>
    <div class="divider"></div>
    <h5 class="title"><a href="#">Item 1</a></h5>
    <p class="content">
      Description 1
    </p>
  </div>
  <div class="slide">
    <div class="logo"></div>
    <div class="divider"></div>
    <h5 class="title"><a href="#">Item 2</a></h5>
    <p class="content">
      Description 2
    </p>
  </div>
  <div class="slide">
    <div class="logo"></div>
    <div class="divider"></div>
    <h5 class="title"><a href="#">Item 3</a></h5>
    <p class="content">
      Description 3
    </p>
  </div>
  ...
 </div>
</div>

slider.autoInit()

Callback functions.

const mySlider = new CreateSlider({
      container: '.slider',
      slider: '.slides',
      mouseEnter: () => {
        // do something
      },
      mouseLeave: () => {
        // do something
      },
      mouseDown: () => {
        // do something
      },
      mouseUp: () => {
        // do something
      },
      scrollPercent: (e) => {
        // do something
      }
})