Javascript 如何仅在手机上播放幻灯片？

我想知道如何才能在手机上观看幻灯片。我需要3个不同的部分在我的网页上相邻，当宽度低于640px时，我需要它变成幻灯片。 我发现了一个集成了以下内容的网页：

正常页面：

移动页面：

有人能帮我吗

这是我正在使用的脚本：

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

如果标签中还没有id，则必须添加id，例如id=“slider”，并将此代码添加到您的样式中：

#slider {
  display: none;
}

@media only screen and (max-width: 768px) {
  #slider {
    display: block;
  }
}

祝你好运。

选项1 使用媒体查询根据屏幕大小显示和隐藏滑块组件

@media only screen and (max-width: 640px) {
  #slider_component {
    display: block;
  }
}
#slider_component {
    display: none;
  }

选项2

---

如果你使用任何的CSS框架，比如Bootstrap或Buffic，你可以附加钩子来显示/隐藏页面上的元素。查看他们的文档。

当我这样做时。在普通页面上，我只能看到3个滑块组件中的一个。是否只能在页面的最大宽度低于某个级别时切换脚本？是的，您也可以使用javascript。当我这样做时，您可以通过检查screen.height和screen.width来根据所需的屏幕大小切换滑块。在普通页面上，我只能看到3个滑块组件中的一个。你能添加屏幕截图吗？