Question

我无法通过拖动手势或滑动来使当前的轮播工作。

我尝试了所有网络资源。首先，大多数情况下，建议的选项是预制轮播，但我必须对其进行硬编码。因此，我一直在寻找代码笔或示例，但是当我的轮播必须以％为单位时，它们中的99％是用像素的预设宽度制作的。因此，我正在寻找帮助来创建该轮播的功能，以使其可拖动。

这是我的index.html：

<!DOCTYPE HTML>
<html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="./SLID/css/style.css">
      <title>SLID</title>
    </head>

    <body>
      <div id="album" class='album'>
        <ul id="carousel" class='carousel is-set'>
          <li class='carousel-element'>
            <img src="assets/img1.jpeg" alt="">
          </li>
          <li class='carousel-element'>
            <img src="assets/img2.jpeg" alt="">
          </li>
          <li class='carousel-element'>
            <img src="assets/img3.jpeg" alt="">
          </li>
          <li class='carousel-element is-ref'>
          </li>
        </ul>
      </div>

      <div class='controls'>
        <button id="nextButton">next</button>
        <button id="prevButton">prev</button>
      </div>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src="SLID/js/index.js"></script>
    </body>

</html>

这是我的style.css：

html,
body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

.album {
  overflow: hidden;
  width: 70%;
  height: 50%;
  margin: auto;
}

.carousel {
  display: flex;
  left: -100%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.carousel.toNext {
  transform: translateX(100%);
}

.carousel.toPrev {
  transform: translateX(-100%);
}

.carousel.is-set {
  transform: none;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-element {
  background: #ddd;
  flex: 1 0 100%;
  text-align: center;
  order: 2;
}

.carousel-element:nth-child(even) {
  background: #d5d5d5;
}

.carousel-element.is-ref {
  order: 1;
}

h2 {
  color: #aaa;
  font-size: 7em;
  font-weight: normal;
  margin: 0;
  padding: 0.6em 0;
  text-align: center;
}

img {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  width: 100%;
}

.controls {
  padding: 2em;
  text-align: center;
}

.controls button {
  background: #aaa;
  border: 0;
  border-radius: 0.25em;
  color: #eee;
  padding: 0.5em 1em;
}

.controls button:hover,
.controls button:focus {
  background: magenta;
}

这是index.js：

(function () {

  let carousel = document.getElementById("carousel");
  carousel.s

  let seats = document.querySelectorAll("ul > li");

  if (seats.length === 1)
    carousel.style.left = 0;

  var recognition = new webkitSpeechRecognition();

  recognition.continuous = true;
  recognition.interimResults = false;
  recognition.lang = "en-US";
  recognition.start();


  let goToNext = () => {
    var el, i, j, new_seat, ref;
    el = document.querySelector("ul > li.is-ref");
    el.classList.remove('is-ref');
    new_seat = el.nextElementSibling || seats[0];
    new_seat.classList.add('is-ref');
    new_seat.style.order = 1;
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = new_seat.nextElementSibling || seats[0];
      new_seat.style.order = i;
    }
    carousel.classList.remove('toPrev');
    carousel.classList.add('toNext');
    carousel.classList.remove('is-set');
    return setTimeout((function () {
      return carousel.classList.add('is-set');
    }), 50);
  }

  let goToPrev = () => {
    var el, i, j, new_seat, ref;
    el = document.querySelector("ul > li.is-ref");
    el.classList.remove('is-ref');
    new_seat = el.previousElementSibling || seats[seats.length - 1];
    new_seat.classList.add('is-ref');
    new_seat.style.order = 1;
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = new_seat.nextElementSibling || seats[0];
      new_seat.style.order = i;
    }
    carousel.classList.remove('toNext');
    carousel.classList.add('toPrev');
    carousel.classList.remove('is-set');
    return setTimeout((function () {
      return carousel.classList.add('is-set');
    }), 50);
  }
  recognition.onresult = (event) => {
    let results = event.results[Object.keys(event.results).length - 1][0].transcript.split(' ');
    let result = results[results.length - 1];
    if (event.results[Object.keys(event.results).length - 1][0].transcript.includes('next slide') || result.toLowerCase() === 'next')
      goToNext()
    if (event.results[Object.keys(event.results).length - 1][0].transcript.includes('previous slide') || result.toLowerCase() === 'previous')
      goToPrev()
  }


  document.getElementById("nextButton").addEventListener("click", () => {
    goToNext();
  });


  document.getElementById("prevButton").addEventListener("click", () => {
    goToPrev();
  });
})();

当前轮播仅可通过按下下一个或上一个按钮或说出webspeech API的下一个或上一个来工作。有关实现拖动或滑动选项的任何想法或解决方案？

JavaScript轮播滑动和拖动

0 个答案: