4

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. carousel/rondell

Can somebody help me with that?

Thank you!

StudentCoder
  • 55
  • 1
  • 6

2 Answers2

4

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

Jędrzej Chałubek
  • 1,410
  • 1
  • 16
  • 29
0

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>
OMAR GHALAMOUN
  • 1