slidernew

SimpleSlider

SimpleSlider is really simple to use slider. Look at the example below.

This is basic structure of html with 3 slides:

<div id="slider-root">
  <!-- slide #1 -->
  <div class="slide slide-item">
    <!-- slide content here -->
    <h1>SLIDE 1 HEADER</h1>
    <span>SLIDE 1</span>
    <button>BUTTON 1</button>
  </div>
  <!-- slide #2 -->
  <div class="slide slide-item">
    <!-- slide content here -->
    <h1>SLIDE 2 HEADER</h1>
    <h1>SLIDE 2 HEADER</h1>
    <span>SLIDE 2</span>
  </div>
  <!-- slide #3 -->
  <div class="slide slide-item">
    <!-- slide content here -->
    <h1>SLIDE 3 HEADER</h1>
    <h1>SLIDE 3 HEADER</h1>
    <h1>SLIDE 3 HEADER</h1>
    <h1>SLIDE 3 HEADER</h1>
    <span>SLIDE 3</span>
  </div>
  <!-- as many slides as you want -->
</div>

The root element of the slider must not have id="slider-root". This id name can be whatever.

Slide itself is found by a class named .slide. This is the only mandatory naming in html part.

.slide is a container for your content.

.slide-item css class is user-defined class to customize slide`s look. This class can be named whatever.

Left and right navigation buttons can also be styled as you like. But there is one thing to keep in mind.

When you write class for theese buttons, you have to preserve nesting:

#slider-root > div.sidenav-left.nav-l {}
#slider-root > div.sidenav-left.nav-r {}

where nav-l and nav-r are css classes for left and right navigation buttons. Again: their name is up to you.

Also you should set width and height of root manualy:

#slider-root {
  width: 100%; // or whatever
  height: 400px; // or whatever
}

JS part is simple also. When html part is done, create SimpleSlider instance:

const slider = new SimpleSlider('slider-root', {options});
slider.init();

Options are:

const options = {
  // must be defined
    allowManualByClickOnSlide: boolean; // allow manually slide to next by clicking on slide itself
  animationDuration: number; // animation time in milliseconds
  sideNavBars: boolean; // enable side navigation bars

  // optional fields
  sideNavCss?: [string, string]; // class names for left and right navigation buttons
  bottomNav?: boolean; // enable bottom navigation (like dots at the bottom)
}

Done. We have a working slider.

TODOs:

• responsive css
• JS object as slider item for dynamic slider content