I have been attempting to set up a carousel using the glider.js library from . Despite following all the instructions, the carousel is not functioning properly. Could you please assist me? When I click on the arrow, it does not move.
<div class="glider-contain">
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<div class="glider">
<div> <img src="./img/barcelona-img.png" alt="Barcelona"></div>
<div> <img src="./img/madrid.png" alt="Madrid"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
</div>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<script src="./glider.min.js"></script>
<script src="../index.js "></script>
<script>
new Glider(document.querySelector('.glider'), {
slidesToShow: 3,
dragable: true,
arrows: {
prev: '.glider.prev',
next: '.glider-next'
}
})
</script>