Glide.js is a small JavaScript library to create full screen glides with few lines of code.

Go through other glides for Documentation.

Click on below button to copy CDN and include them in the <body> section, after all other Scripts.





<script>
.........
.........
</script>

<script src='glide.js'> </script>
https://cdn.jsdelivr.net/npm/glidejs.lib@1.0.3/dist/glide.js
How to use Glide.js ?


<div id='glide'>
<section class='glideSlide' id='first_glide_id'>
<div class='glideContent'>
..............
</div>
</section>

<section class='glideSlide' id='second_glide_id'>
<div class='glideContent'>
..............
</div>
</section>
</div>


Use the above template for declaring divs and section. The outer div id should be 'glide'. You should declare the section class as 'glideSlide' and id of any name. All the section contents should be declared within a div with id 'glideContent. Head over to next glide for <script> linking. All the ids and classes are mandatory.
How to use Glide.js ?


<script>
var glides = ['first_glide_id', 'second_glide_id'];
var tooltip = ['your_tooltip_first_glide', 'your_tooltip_second_glide'];
</script>

<script src='glide.js'> </script>


Declare the ids of the sections in array 'glides' and declare the tooltips for the glides dots(bottom) in the array 'tooltip'. Hover on the dots for tooltip.
Customization :

1. #next - for customizing the next glide button(>).
2. #previous - for customizing the previous glide button(<).
3. #dots + 'your id for sections' - for customizing the dots(bottom).
4. #tooltipspan - for customizing the dots tooltip.

Eg:

#next, #previous{
color:rgba(1,1,1,0.5) !important;
}
#next:hover, #previous:hover{
color:rgba(1,1,1,1) !important;
}
#dotsglideone, #dotsglidetwo, #dotsglidethree, #dotsglidefour{
background:rgba(1,1,1,0.5) !important;
}
#dotsglideone:hover, #dotsglidetwo:hover, #dotsglidethree:hover, #dotsglidefour:hover{
background:rgba(1,1,1,1) !important;
}
#tooltipspan{
color:rgba(1,1,1,0.5) !important;
}


Navigation :
	
1. Using Next(>) and Previous(<) button.
2. Using Dots in the bottom.
3. Using Left arrow and Right arrow keys.