css-slider

A Simple, Lightweight and Powerful CSS Slider

How to install

npm install css-slider --save-dev 

How to use

HTML Way

<div class="og-slider--simple bs_slider "
     data-autoplay="50000000"
     data-content=".bs_slider_content"
     data-slide=".bs_slide"
     data-replay="true"
     data-arrow=".bs_slider_arrow">
    <div class="og-slider--simple__content bs_slider_content">
        <div class="bs_slide">1</div>
        <div class="bs_slide">2</div>
        <div class="bs_slide">3</div>
        <div class="bs_slide"> You can add your content here</div>
    </div>
    <div class="bs_slider_arrow" direction="left"> [LEFT] </div>
    <div class="bs_slider_arrow" direction="right"> [RIGHT] </div>
</div>

JS to HTML Way

import {CSSSlider} from './slider/index';
(() => {
    [...document.querySelectorAll('.bs_slider')].forEach((slider) => {
        new CSSSlider(slider, slider.dataset);
    });
})();

JS Way

import {CSSSlider} from './slider/index';

new CSSSlider(document.querySelector('.bs_slider'), {
     content: '.bs_slider_content',  /* Mandatory */
     slide: '.bs_slide',  /* Mandatory */
     autoplay: '5000', /* Optional */
     replay: true, /*Optional*/
     button: '.bs_slider_button', /*Optional*/
     arrow: '.bs_slider_arrow' /* Optional (Add direction to HTML)*/
 });

Basic Styles

    .og-slider--simple {
      overflow: hidden;
      &__content {
        display:grid;
        grid-auto-flow: column;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        &::-webkit-scrollbar,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
          display: none;
        }
      }
      &__slide {
        height: 80vh;
        width: 100vw;
        scroll-snap-align: start;
      }
    }