时间戳

首页 > 解决方案 > HTML 触摸屏图库滑块

html - HTML 触摸屏图库滑块

问题描述

所以，我和几个网页设计朋友正在为我们学校设计一个交互式信息亭项目。我们的设计团队提出了创建一个包含照片库的滑块的想法。问题是最终产品应该能够左右滑动来查看照片。

现在，不要误会我的意思，我对 HTML 和 CSS 了解很多，但是（由于它的触摸屏机制）这个任务似乎有点超出我的范围。

无论如何，如果有人可以通过给我一些关于如何实现这样的事情的例子来帮助我，那将是非常有义务的。请并感谢您的帮助。

标签： html

解决方案

$('.owl-carousel').owlCarousel({
    items:4,
    lazyLoad:true,
    loop:true,
    margin:10
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x650&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
  <picture>
      <source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
      <source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
      <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
  </picture>
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
</div>

Owl Carousel 是 jQuery 插件。完全可定制，支持触摸和拖动，完全响应，使用 CSS3 Translate3d 转换进行硬件加速，旧版浏览器支持 CSS2 后备。 下载链接

特征

  • 无限循环
  • 中心项目
  • 智能速度
  • 舞台填充
  • 项目保证金等， 文件

推荐阅读