How to put glide-arrows outside of glide-track - html

Question

I`m trying to build a carousel/rondell with glide.js.
I want the left and right arrows to be displayed outside of the glide-track.
The carousel/rondell should be fully responsive.
Here is a picture of how it should be.
Can somebody help me with that?
Thank you!

Answer 1

You have to write the logic for arrows by yourself as Glide only looks for controls inside its root element.
Use a Glide API and the .go() method on previously queried HTML elements.
var nextButton = document.querySelector('#next');
var prevButton = document.querySelector('#prev');
var glide = new Glide('#glide');
nextButton.addEventListener('click', function (event) {
event.preventDefault();
glide.go('>');
})
prevButton.addEventListener('click', function (event) {
event.preventDefault();
glide.go('<');
})
glide.mount();
Visit Glide API documentation for more informations

Answer 2

You can now customize the buttons by CSS
let glide =new Glider(document.querySelector('.glider'), {
slidesToShow: 1,
dots: '#dots',
draggable: true,
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.css">
<script src="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.js"></script>
<div class="glider-contain">
<div class="glider">
<div>your first content here</div>
<div>your second content here</div>
<div>your third content here</div>
<div>your content here</div>
</div>
<button aria-label="Previous" onclick="glide.scrollItem(glide.slide-1)" >«</button>
<button aria-label="Next" onclick="glide.scrollItem(glide.slide+1)">»</button>
<div role="tablist" class="dots"></div>
</div>