Swipeable Slider Carousel In Vanilla JavaScript – BriSlider

Preview:

Description:

BriSlider is a responsive, touch-enabled slider carousel written in vanilla JavaScript. This means that you don’t need any jQuery or JS frameworks to use the plugin.

It works on iOS, Android, and desktop devices. It’s built to feel just as natural on a touchscreen as it does on the desktop using the mouse and keyboard.

More Features:

• Automatic rotation.
• Autoplay progress indicator as pagination bars.
• Switch between slides via touch swipe and mouse drag.
• Auto resize to fit any screen size.

How to use it:

1. Load the BriSlider’s JavaScript and CSS in the document.

<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/slider.css">
<!-- Core JavaScript -->
<script src="js/slider_main.js"></script>
<!-- Progress Bar Component -->
<script src="js/slider_bar.js"></script>
<!-- Touch Support Component -->
<script src="js/slider_swipe.js"></script>

2. Add slides together with the navigation and pagination controls to the carousel.

<div class="slider" id="sliderBody">
  <button id="btnPrev">🢐</button>
  <button id="btnNext">🢒</button>
  <div class="slide slide1">1</div>
  <div class="slide slide2">2</div>
  <div class="slide slide3">3</div>
  <div class="slide slide1">4</div>
  <div class="slide slide2">5</div>
  <div class="slide slide3">6</div>
  <div class="slider-navbar" id="sliderNavbar"></div>
</div>

3. Customize the carousel by overriding the default parameters at the beginning of the slider_main.js.

let slides = document.getElementsByClassName('slide'),
    next = document.querySelector('#btnNext'),
    prev = document.querySelector('#btnPrev'),
    navbar = document.querySelector('#sliderNavbar'),
    transitionSpeed = 300,  // Time of animation in ms, it's the only place where you have to change it
    transitionValue = 'ease-in-out ' + transitionSpeed + 'ms',
    isSlideStop = true,
    isAutoplay = true,    // true - autoplay is on, false - off
    current = 0,      // Number of first active slide
    timer;