how to hide and show arrow icon on the basis number of slide in glide slide

Lalit Gour
2 min readDec 7, 2020

Glide slider is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide.

For implementing the glide slider please see for the reference https://glidejs.com/

We can hide and show the arrow icons which controls the functionality of swiping the slide.

For example we are showing one slide at a time and we want to hide/show arrow icons on the basis of slide number. So, on the first slide the left arrow icon will be hide and on the last slide the right arrow icon will be hide otherwise both of the arrow icon will be shown.

For this we need to write a function that has a logic to hide/show the arrow icons on the basis of slide number.

In above function we will get the current index number of slides by using this glide.index and then we will show/hide the arrow icons i.e if index number is zero then the left arrow will be hide and right arrow is shown and if it last slide than right arrow will be hide and left arrow will be shown.

After this we need to mount this function like that.

Now arrow icons will be hide/show on the basis of slide number.

--

--