Working on fullscrfeen slider.

Need help to count slides inside main slider container & create navigation <ul class="Nav"><li><a></a></li></ul>. Need help to add scroll effect Vertically or Horizontally
Add class .active to active slide
Display tooltip on navigation hover

Need help to write function ,

$('main').slider({ //It may be  main or .slider or #slider
      sectionSelector: '.slide',   
      navigation: true,
      navigationPosition: 'right',
      navigationTooltips: true,
      scrollHorizontally: true
    });

**HTML**    
<main class="slider" id="slider">
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 1</h1>
  </section>
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 2</h1>
  </section>
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 3</h1>
  </section>
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 4</h1>
  </section>
</main>

**CSS**
main {
    width: 100vw !important;
    height: 100vh !important;
    position: absolute !important;
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow: hidden;
}

section {
    width: 100%;
    height: 100%;
  background: #EF8D24;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    /*visibility: hidden;*/
}

section.active {
  visibility: visible;
  }