Creating a carousel of cards using JavaScript, CSS, and HTML

Question

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png

I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicked, as illustrated in the image. Can someone assist me in figuring out how to achieve this synchronization between the indicators and card progression upon clicking?

let targeta = document.querySelectorAll('.card');
let puntos = document.querySelectorAll('.secciones .punto');

for (i = 0; i < targeta.length; i++) {
  puntos[i].addEventListener('click', function(evento) {
    for (i = 0; i < puntos.length; i++) {
      puntos[i].classList.remove('activo');
    }
    clase_activo(evento);
  });

  targeta[i].addEventListener('click', function(evento) {
    for (i = 0; i < puntos.length; i++) {
      targeta[i].classList.remove('activo');
    }
    clase_activo(evento);
  });
}

function clase_activo(evento) {
  if (evento.target.classList.contains('activo')) {
    evento.target.classList.remove('activo');
  } else {
    evento.target.classList.add('activo');
  }
}

.product-list {
  background: #dfe6e9;
  padding: 3em;
}

.product-list .card {
  background: white;
  border-radius: 10px;
  padding: 1em;
  box-shadow: 0px 10px 5px #b2bec3;
  text-align: center;
  font-family: 'SpaceGrotesk-medium';
}

.card {
  height: 300px;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
}

.secciones {
  display: flex;
  align-items: center;
  /*      background: #fb6969;*/
  justify-content: center;
}

.punto {
  background: #b4f028;
  /* #fb9769; */
  height: 10px;
  width: 30px;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 2px;
}

.punto.activo {
  background: #f07e28;
  /* #fb9769; */
}

.card.activo {
  background: #f07e28;
}

<section class="product-list">
  <h1>productos</h1>
  <div class="product-container">

    <div class="card 1 activo">
    </div>

    <div class="card 2 ">
    </div>

    <div class="card 3 ">
    </div>

    <div class="card 4 ">
    </div>

  </div>
  <div class="secciones">
    <div class="punto  activo"></div>
    <div class="punto "></div>
    <div class="punto "></div>
    <div class="punto "></div>
  </div>
</section>

javascript html css carousel

Answer 1

Answer №1

In order to enhance user interaction, I utilized a loop to assign click events to both the cards and dots displayed on the webpage. Whenever a card or dot is clicked, the active class gets removed from all other cards and dots, and then it is added to the clicked item along with its corresponding pair.

// Accessing all cards and dots
let cards = document.querySelectorAll('.card');
let dots = document.querySelectorAll('.secciones .punto');

// Iterating through each card and dot
for (let i = 0; i < cards.length; i++) {
    // Adding click event to each card
    cards[i].addEventListener('click', function() {
        for (let j = 0; j < cards.length; j++) {
            // Removing active class from all cards
            cards[j].classList.remove('activo');
            dots[j].classList.remove('activo');
        }
        // Adding active class to the clicked card
        this.classList.add('activo');
        dots[i].classList.add('activo');
    });

    // Adding click event to each dot
    dots[i].addEventListener('click', function() {
        for (let j = 0; j < cards.length; j++) {
            // Removing active class from all cards
            cards[j].classList.remove('activo');
            dots[j].classList.remove('activo');
        }
        // Adding active class to the corresponding card
        cards[i].classList.add('activo');
        this.classList.add('activo');
    });
}

Answer 2

In order to enhance user interaction, I utilized a loop to assign click events to both the cards and dots displayed on the webpage. Whenever a card or dot is clicked, the active class gets removed from all other cards and dots, and then it is added to the clicked item along with its corresponding pair.

// Accessing all cards and dots
let cards = document.querySelectorAll('.card');
let dots = document.querySelectorAll('.secciones .punto');

// Iterating through each card and dot
for (let i = 0; i < cards.length; i++) {
    // Adding click event to each card
    cards[i].addEventListener('click', function() {
        for (let j = 0; j < cards.length; j++) {
            // Removing active class from all cards
            cards[j].classList.remove('activo');
            dots[j].classList.remove('activo');
        }
        // Adding active class to the clicked card
        this.classList.add('activo');
        dots[i].classList.add('activo');
    });

    // Adding click event to each dot
    dots[i].addEventListener('click', function() {
        for (let j = 0; j < cards.length; j++) {
            // Removing active class from all cards
            cards[j].classList.remove('activo');
            dots[j].classList.remove('activo');
        }
        // Adding active class to the corresponding card
        cards[i].classList.add('activo');
        this.classList.add('activo');
    });
}

Creating a carousel of cards using JavaScript, CSS, and HTML

Answer №1

Similar questions

Can anyone explain why I keep encountering an endless loop when using react hooks?

The number input is not compatible with JavaScript/jQuery validation

struggling to develop a sophisticated 'shopping cart organization' program

Tips for implementing filters in Angular2 without using the package field in the console

Display information when hovering over a tag

Checking to see if there are a minimum of two checkboxes selected before inputting the data into the database

How can I create multiple divs that look alike?

Guidelines for submitting and displaying content on a single page with jQuery and MySQL

JavaScript node_modules import issue

How can I modify the content within a scoped `<style>` tag in Vue?

Are there any universal methods for enlarging the size of a checkbox without altering the HTML structure?

Craft fresh items within HTTP request mapping

Unable to present information retrieved from REST API, despite data being provided by the server

I am encountering a problem while attempting to fetch information from Firestore through the Firebase JS SDK

Issue with undefined arrays in the Angular merge sort visualization tool

Display an error message when the button is clicked and the input field is left empty in a Vue 3 script setup

The height and alignment of the <a> tag and <p> element vary within a flex container

The table's pagination displays above, thanks to Tailwindcss

The identical page content is displayed on each and every URL

A guide on configuring Flexbox to consistently display three columns