jquery 带有文本幻灯片的完整背景图像

brccelvz 于 2023-03-07 发布在 jQuery

关注(0)|答案(1)|浏览(99)

考虑以下加价：

<ul id="slideshow">
   <li><span>Image 01</span><img src="image1.jpg" alt=""></li>
   <li><span>Image 02</span><img src="image2.jpg" alt=""></li>
   <li><span>Image 03</span><img src="image3.jpg" alt=""></li>
   <li><span>Image 04</span><img src="image4.jpg" alt=""></li>
   <li><span>Image 05</span><img src="image5.jpg" alt=""></li>
   <li><span>Image 06</span><img src="image6.jpg" alt=""></li>
 </ul>

我希望图像是全屏的整个网页和文字定位在顶部。图像/文字也应该过渡的延迟。
如何使用简单的jQuery来实现这一点？

jquery

来源：https://stackoverflow.com/questions/75650742/full-background-image-with-text-slideshow

1条答案

按热度按时间

h5qlskok1#

试试这个CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider {
  height: 100%;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.slide {
  height: 100%;
  flex-shrink: 0;
  width: 100vw;
  scroll-snap-align: start;
}

您正在使用CSS快照

赞(0）回复(0）举报 2023-03-07

我来回答

jquery 带有文本幻灯片的完整背景图像

1条答案

相关问题

热门标签

最新问答