Glide.js 每次点击 2 张幻灯片

Question

我有一个用 glide.js 制作的滑块。它运行良好，但我需要在单击第二个滑行项目符号时移动到索引 2，在单击第三个时移动到索引 4。

我尝试将 data-glide-dir="=1" 更改为 =2 并将 data-glide-dir="=2" 更改为 "=4" 但没有成功（当我点击Material，class .glide__bullet--active 去影响。

有人知道我还能尝试什么吗？谢谢！

window.addEventListener('load', function(){
    new Glide(document.getElementById('glider-2'), {
      type: 'carousel',
      perView: 2,
      perTouch: 2,
      gap: 15,
      breakpoints: {
        1024: {
        perView: 2
        },
        750: {
        perView: 1
        }
    }
  }).mount();
});

.glide__bullets {
  display: flex;
  justify-content: center;
  padding: 0 20px 30px 20px;
  margin: 0 auto;
  max-width: 90%;
}


.glide__bullet {
  position: relative;
  display: flex;
  font-size: 18px;
  justify-content: center;
  flex: 0 1 calc(100% / 3);
  max-width: calc(100% / 3);
  padding: 0;
  border: 0;
  overflow: hidden;
  color: #000;
  height: 40px;
  background-color: transparent;
  box-shadow: inset 0px -4px 0px 0px lightgrey;
}

.glide__bullet::before {
  content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    display: block;
    opacity: 0;
    transform: translateX(-100%);
    background-color: #000;
    transition: transform 5s;
  }

  .glide__bullet--active::before {
      opacity: 1;
      transform: translateX(0);
    }

<div class="glide" id="glider-2">
   <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0">Solar</button>
      <button class="glide__bullet" data-glide-dir="=1">Material</button>
      <button class="glide__bullet" data-glide-dir="=2">Impact</button>
   </div>
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
              <li>Slide 1</li>
              <li> Slide 2</li>
              <li>Slide 3</li>
              <li>Slide 4</li>
              <li>Slide 5</li>
              <li>Slide 6</li>
            </ul>
        </div>
      </div>

Answer 1

尝试 yourGlide.go('')\

https://glidejs.com/docs/api/#go-pattern-

var material = document.querySelector('#material')
var impact = document.querySelector('#impact')
    
material.addEventListener('click', function () {
   yourGlide.go('=1')
})
impact.addEventListener('click', function () {
   yourGlide.go('=3')
})

也许是这样的

Glide.js 每次点击 2 张幻灯片

Glide.js with 2 slides per click

javascript

css

glidejs