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;
}