0

我正在为轮播使用 Glide js 库，我浏览了文档https://glidejs.com/，它工作正常。但我试图实现的场景是轮播不应该在桌面视图上工作，它应该只在移动视图上工作。

我已经尝试了下面的示例代码

var titles = document.querySelectorAll('h1')
var config = {
  type:'carousel',
  perView:1,
  gap:0,
  hoverpause:false,
  autoplay: 3000,
  animationDuration:1000
}
var glide = new Glide('.glide',config)
glide.on('run.after', function() {
  titles.forEach(ele=> ele.classList.remove('show'))
  titles[glide.index].classList.add('show')
  console.log(glide.index)
})

glide.mount()
body {
  padding: 0;
  margin: 0;
}

ul{
  padding: 0;
  margin: 0;
  
}
.container {
  width: 100%;
}

.glide__slide img {
  width: 100%;
  height: auto;
}

ul li h1 {
  opacity: 0;
  transform: translateX(-400px);
  transition: all 0ms ease-in-out 0ms; 
}

.show {
  opacity: 1;
  transform: translateX(0px);
  transition: all 350ms ease-in-out 200ms; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.min.js"></script>
<div class="container">
  <div class="glide">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide"> <img src="https://img.icity.life/upload/2017/292/329/04c/full/32904cbd8d7e978cc1b7f221958767a7.jpg">
          <h1>Slide1</h1>
        </li>
        <li class="glide__slide"> <img src="https://s0.rbk.ru/v6_top_pics/resized/1440xH/media/img/3/67/755041686860673.jpg">
          <h1>Slide2</h1>
        </li>
        <li class="glide__slide"> <img src="https://juiceweddingband.com/wp-content/uploads/2016/05/Camaro.jpg">
          <h1>Slide3</h1>
        </li>
        <li class="glide__slide"> <img src="https://img.icity.life/upload/2017/32/8da/4db/full/8da4dbf03fa5af297395dbf174675f74.jpg">
          <h1>Slide4</h1>
        </li>
      </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="&lt;">prev</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir="&gt;">next</button>
    </div>
  </div>
</div>

任何帮助将不胜感激 ！！

4

0 回答 0