Question 216067 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to add control arrows to this carousel?

I have this 3d carousel, made it mostly with the help of a tutorial and i want to add navigation arrows so ppl can make it move, but i’m not really sure how to add them

<style>
    @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@200;300;400;600;700&display=swap');
    
    .carrusel-nuevos {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      height: 100vh;
      font-family: 'Urbanist', sans-serif;
    }
    
    a {
      text-decoration: none;
    }
    
    input {
      display: none;
    }
    
    .container { /*editando*/
      width: 100%;
      height: 100%;
      max-width: 600px;
      max-height: 600px;
      display: flex;
      transform-style: preserve-3d;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-left: 450px;
    }
    .cards {
      position: relative;
      height: 500px;
      width: 430px;
      margin-bottom: 20px;
      perspective: 1000px;
      transform-style: preserve-3d;
    }
    .cards label {
      position: absolute;
      width: 430px;
      left: 0;
      right: 0;
      margin: auto;
      cursor: pointer;
      transition: transform 0.55s ease;
    }
    
    .cards .card{
      position: relative;
      height: 100%;
      /*background-color: #fff;*/
      border-radius: 10px;
      padding: 30px 35px;
    }
    
    .card .image{
      display: flex;
      justify-content: center;
    }
    .card {
      border-radius: 5px;
      margin-top: 23px;
    }
    
    .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .card .image .dots{
      text-align: center;
    }
    
    .dots div{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-bottom: 10px;
    }
    
    .dots div:nth-child(1){
      background-color: var(--current-color1);
    }
    
    .dots div:nth-child(2){
      background-color: #5B85F9;
    }
  
  .dots div:nth-child(3){
  
      background-color: #000;
  }
  
  .card .infos{
  
      display: block;
      text-align: end;
      padding-top: 60px;
  }
  
  .infos span{
  
      display: block;
  }
  
  .infos .name{
  
      font-size: 20px;
      color: var(--current-color1);
      margin-bottom: 20px;
      text-align: center;
      transition: all .6s ease;
  }
  
  .infos .lorem{
  
      font-size: 15.5px;
      color: #ECEAED;
      letter-spacing: 3px;
  }
  
  /*.card .btn-contact{
  
      width: 100%;
      height: 60px;
      margin: 35px auto;
      border-radius: 5px;
      background-color: var(--current-color1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 25px;
      letter-spacing: 10px;
      font-weight: 700;
      transition: all .7s ease;
  }*/
  
  .card .socials{
  
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
  }
  
  .socials i{
  
      font-size: 25px;
      transition: all .7s ease;
      color: var(--current-color2);
  }
  
  
  
  #s1:checked~.cards #slide4,
  #s2:checked~.cards #slide5,
  #s3:checked~.cards #slide1,
  #s4:checked~.cards #slide2,
  #s5:checked~.cards #slide3 {
      transform: translate3d(-70%, 0, -220px);
      --current-color1: #ECEAED;
      --current-color2: #404457;
      filter: blur(5px);
  }
  
  #s1:checked~.cards #slide5,
  #s2:checked~.cards #slide1,
  #s3:checked~.cards #slide2,
  #s4:checked~.cards #slide3,
  #s5:checked~.cards #slide4 {
      transform: translate3d(-35%, 0, -120px);
      --current-color1: #ECEAED;
      --current-color2: #404457;
      filter: blur(5px);
  }
  
  #s1:checked~.cards #slide1,
  #s2:checked~.cards #slide2,
  #s3:checked~.cards #slide3,
  #s4:checked~.cards #slide4,
  #s5:checked~.cards #slide5 {
      transform: translate3d(0, 0, 0);
      --current-color1: rgb(242, 117, 154);
      --current-color2: #ECEAED;
  }
  
  #s1:checked~.cards #slide2,
  #s2:checked~.cards #slide3,
  #s3:checked~.cards #slide4,
  #s4:checked~.cards #slide5,
  #s5:checked~.cards #slide1 {
      transform: translate3d(35%, 0, -120px);
      --current-color1: #ECEAED;
      --current-color2: #404457;
      filter: blur(5px);
  }
  
  #s1:checked~.cards #slide3,
  #s2:checked~.cards #slide4,
  #s3:checked~.cards #slide5,
  #s4:checked~.cards #slide1,
  #s5:checked~.cards #slide2 {
      transform: translate3d(70%, 0, -220px);
      --current-color1: #ECEAED;
      --current-color2: #404457;
      filter: blur(5px);
  }
  </style>
  <body class="carrusel-nuevos">
  
    <div class="container">
  
  
      <input type="radio" name="slider" class="d-none" id="s1" checked>
      <input type="radio" name="slider" class="d-none" id="s2">
      <input type="radio" name="slider" class="d-none" id="s3">
      <input type="radio" name="slider" class="d-none" id="s4">
      <input type="radio" name="slider" class="d-none" id="s5">
  
      <div class="cards">
        <label for="s1" id="slide1">
          <div class="card">
            <div class="image">
              <img src="image-1.jpg" alt="">
            </div>
            <div class="infos">
              <span class="name">Bodysuit Shaper Thong Strapless Dailyweat Everntwear Falas</span>
            </div>
          </div>
        </label>
  
        <label for="s2" id="slide2">
          <div class="card">
            <div class="image">
              <img src="image-2.jpg" alt="">
            </div>
            <div class="infos">
              <span class="name">Free Run Flyknit</span>
            </div>
          </div>
        </label>
  
        <label for="s3" id="slide3">
          <div class="card">
            <div class="image">
              <img src="image-3.jpg" alt="">
            </div>
            <div class="infos">
              <span class="name">Black Toe Union</span>
            </div>
          </div>
        </label>
  
        <label for="s4" id="slide4">
          <div class="card">
            <div class="image">
              <img src="image-4.jpg" alt="">
            </div>
            <div class="infos">
              <span class="name">Retro High Og</span>
            </div>
          </div>
        </label>
  
        <label for="s5" id="slide5">
          <div class="card">
            <div class="image">
              <img src="image-5.jpg" alt="">
            </div>
            <div class="infos">
              <span class="name">Off-White Air Jordan</span>
            </div>
          </div>
        </label>
      </div>
  
    </div>
  
  </body>

I need to add navigation arrows, so people know that yo can click on it and make it move on command, so i would really appreciate it if someone actually help me with that part

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    it didnt sadly, but still appreciate the help nonetheless


  2. 0

    this is one example hope it helps

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Carousel with Navigation Arrows</title>
  <style>
    /* Your CSS styles here */
    /* ... */
  </style>
</head>

<body class="carrusel-nuevos">

  <div class="container">
    <!-- Navigation arrows -->
    <button class="carousel-control prev" onclick="prevSlide()">&#8592;</button>
    <button class="carousel-control next" onclick="nextSlide()">&#8594;</button>

    <input type="radio" name="slider" class="d-none" id="s1" checked>
    <input type="radio" name="slider" class="d-none" id="s2">
    <input type="radio" name="slider" class="d-none" id="s3">
    <input type="radio" name="slider" class="d-none" id="s4">
    <input type="radio" name="slider" class="d-none" id="s5">

    <div class="cards">
      <label for="s1" id="slide1">
      <div class="card">
        <div class="image">
          <img src="image-1.jpg" alt="">
        </div>
        <div class="infos">
          <span class="name">Bodysuit Shaper Thong Strapless Dailyweat Everntwear Falas</span>
        </div>
      </div>
    </label>

      <label for="s2" id="slide2">
      <div class="card">
        <div class="image">
          <img src="image-2.jpg" alt="">
        </div>
        <div class="infos">
          <span class="name">Free Run Flyknit</span>
        </div>
      </div>
    </label>

      <label for="s3" id="slide3">
      <div class="card">
        <div class="image">
          <img src="image-3.jpg" alt="">
        </div>
        <div class="infos">
          <span class="name">Black Toe Union</span>
        </div>
      </div>
    </label>

      <label for="s4" id="slide4">
      <div class="card">
        <div class="image">
          <img src="image-4.jpg" alt="">
        </div>
        <div class="infos">
          <span class="name">Retro High Og</span>
        </div>
      </div>
    </label>

      <label for="s5" id="slide5">
      <div class="card">
        <div class="image">
          <img src="image-5.jpg" alt="">
        </div>
        <div class="infos">
          <span class="name">Off-White Air Jordan</span>
        </div>
      </div>
    </label>
    </div>

  </div>

  <script>
    // Your JavaScript code here
    let currentIndex = 0;
    const slides = document.querySelectorAll('.cards label');

    document.querySelector('.prev').addEventListener('click', prevSlide);
    document.querySelector('.next').addEventListener('click', nextSlide);

    function showSlide(index) {
      slides.forEach((slide, i) => {
        const offset = (i - index) * 100;
        slide.style.transform = `translateX(${offset}%)`;
      });
      currentIndex = index;
    }

    function prevSlide() {
      currentIndex = (currentIndex - 1 + slides.length) % slides.length;
      showSlide(currentIndex);
    }

    function nextSlide() {
      currentIndex = (currentIndex + 1) % slides.length;
      showSlide(currentIndex);
    }
  </script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search