仅在移动屏幕尺寸上使用 glide.js 轮播答案

【问题标题】：Only use glide.js carousel on mobile screen size仅在移动屏幕尺寸上使用 glide.js 轮播
【发布时间】：2022-10-06 22:14:04
【问题描述】：

我正在为轮播使用 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>

任何帮助将不胜感激！！

标签： javascript mobile carousel conditional-breakpoint glidejs

【解决方案1】：

我在寻找同样的东西时发现了这个：

@media screen and (min-width: BREAKPOINT1) and (max-width: BREAKPOINT2) { .glide__slides { transform : initial !important; } }

似乎可以解决问题。在这里找到： https://lightrun.com/answers/glidejs-glide-disableenable-glide-based-on-breakpoint

谢谢去多里安菲利普

【讨论】：