如何将滑动箭头放在滑动轨道之外

Question

我正在尝试使用glide.js构建一个走马灯/旋转木马。 我希望左右箭头显示在glide-track之外。 走马灯/旋转木马应完全响应。 下面是它的样子。 有人可以帮我吗？

谢谢！

- StudentCoder

Answer 1

由于Glide只在其根元素内查找控件，因此您需要自己编写箭头的逻辑。

使用Glide API和先前查询到的HTML元素上的.go()方法。

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();

请访问Glide API文档以获取更多信息。

- Jędrzej Chałubek

Answer 2

现在你可以通过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