Создал слайдер с бесконечной каруселью, но не могу вычислить Javascript, чтобы заставить кнопки работать - PullRequest
Новая
       88

Создал слайдер с бесконечной каруселью, но не могу вычислить Javascript, чтобы заставить кнопки работать

0 голосов
/ 29 мая 2020

Вот мой код в html, и будьте осторожны, так как я новичок в кодировании вроде ... Я еще не разбирался в тонкостях кодирования JS и хотел бы знать, есть ли простой способ написать некоторые javascript, чтобы заставить эти кнопки ползунков работать?

Я испортил код, который я знаю, так как чувствую, что у меня слишком много div, потому что я в основном взял некоторые вещи из разные коды, которые я нашел и пробовал мне sh их вместе, пока я не ударился о стену с частью JS ...

в любом случае вот мой html ... и вы можете найти мой код здесь https://codepen.io/TECHsanMedia/pen/JjYQqNL

<head>
  <script
    src="https://kit.fontawesome.com/e80ecff042.js"
    crossorigin="anonymous"
  ></script>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Muli:400,700&display=swap");

    body {
      margin: 0;
      height: calc(100vh - 8em);
      font-family: "Muli", sans-serif;
    }
    img {
      object-fit: cover;
      height: 65%;
      width: 100%;
    }

    .slideshow {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .items {
      width: 100vw;
      display: flex;
      align-items: center;
      width: fit-content;
      animation: carouselAnim 40s infinite alternate linear;
    }

    .entry {
      display: flex;
      align-items: center;
      flex-direction: column;
      position: relative;
      width: 450px;
      height: 550px;
      background: #fff;
      margin: 1em;
      padding: 0.5em;
      border-radius: 10px;
      box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.35);
    }

    @media only screen and (max-width: 768px) {
      .items {
        animation: carouselAnim 35s infinite alternate linear;
      }

      @keyframes carouselAnim {
        from {
          transform: translate(0, 0);
        }
        to {
          transform: translate(calc(-100% + (2 * 300px)));
        }
      }
    }

    .entry h3 {
      font-size: 1.4em;
      text-align: center;
    }

    .entry p {
      font-size: 1em;
      text-align: center;
      margin: 1em;
    }

    .name {
      font-weight: bold;
    }

    @keyframes carouselAnim {
      from {
        transform: translate(0, 0);
      }
      to {
        transform: translate(calc(-100% + (5 * 300px)));
      }
    }

    .prev-next-button {
      position: absolute;
      top: 40%;
      width: 60px;
      height: 60px;
      transform: translateY(-50%);
      z-index: 250;
    }

    .btn_prev {
      left: 5px;
    }
    .btn_next {
      right: 5px;
    }

    .prev-next-button i {
      position: absolute;
      left: 20%;
      top: 20%;
      width: 60%;
      height: 60%;
    }
  </style>
</head>
<div class="slideshow" id="slideshow">
  <div class="myCarousel">
    <div class="items">
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
      <div class="entry">
        <h3 class="name">John Doe</h3>
        <img
          src="https://lirp-cdn.multiscreensite.com/8602d137/dms3rep/multi/opt/elephant-safari-park-bali-indonesia-page-background-640w.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=3&h=750&w=940"
          alt="Smiling person"
        />
        <p class="quote">
          "Man, I think this app freaking rocks and stuff. Dude."
        </p>
      </div>
    </div>
    <!-- Left and right controls -->
    <div class="slideshow-controls">
      <div id="btn_prev" class="prev-next-button btn_prev">
        <i class="fas fa-caret-square-left fa-2x"></i>
      </div>
      <div id="btn_next" class="prev-next-button btn_next">
        <i class="fas fa-caret-square-right fa-2x"></i>
      </div>
    </div>
  </div>
</div>
...