HTML Touchscreen Gallery Slider

Question

Итак, я и несколько друзей по веб-дизайну работаем над интерактивным киоск-проектом для нашей школы.Наша команда дизайнеров предложила создать слайдер, состоящий из фотогалереи.Дело в том, что конечный продукт должен иметь возможность проводить пальцем влево и вправо для просмотра фотографий.

Теперь, не поймите меня неправильно, я много понимаю о HTML и CSS, но (из-за механики сенсорного экрана) эта задача кажется немного не в моем вкусе.

Во всяком случае, если бы кто-то мог помочь мне, дав мне несколько примеров того, как реализовать что-то подобное, это было бы очень полезно.Пожалуйста и спасибо за вашу помощь.

Answer 1

$('.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 поддерживается для старых браузеров. ссылка для скачивания

Особенности

• Петля бесконечности
• Центральный элемент
• Умная скорость
• Stage Padding
• Маржа товара и т. Д., Документы