Review Carousel

Page section: playground

This carousel allows you to add more items to the the array and will work without problems. In fact with a form you could add items and it should work.

How it’s made

  1. An array of objects called reviews is created. Each object has a name, job, img and text fields. (There is also a numerical id field though this seems redundant.)
  2. There are corresponding HTML elements for each field: name heading, job subtitle, an <img> tag and a text paragraph which are linked to variables in the JS.
  3. A counter is declared at 0: let currentItem = 0; which is used thoughout the process.
View contents of: /static/js/review-carousel.js
const reviews = [
  {
    id: 1,
    name: 'Elise Wilcox',
    job: 'farm effluent manager',
    img: 'elise-wilcox.avif',
    text: 'Performs really well and randomly produces smells of burnt plastic.',
  },
  {
    id: 2,
    name: 'Robert Linder',
    job: 'faucet operator',
    img: 'robert-linder.avif',
    text: 'Never seen anything like it. The cost to performance ratio is simply mindblowing.',
  },
  {
    id: 3,
    name: 'Hamza Nouasria',
    job: 'Child safety officer',
    img: 'hamza-nouasria.avif',
    text: 'I’ve now got so much citrus fruit I don’t know what to do with it.',
  },
  {
    id: 4,
    name: 'Brian Tromp',
    job: 'Paleoanthropologist',
    img: 'brian-tromp.avif',
    text: 'This is so good I have managed to convert my cello into a rodent pen.',
  },
  {
    id: 5,
    name: 'Wild Bob Turner',
    job: 'Llama trainer',
    img: 'caju-gomes.avif',
    text: 'Much bigger than I’d expected which was just as well as everyone wanted a piece.',
  },
  {
    id: 6,
    name: 'jagtar Singh',
    job: 'factor meat packer',
    img: 'jagtar-singh.avif',
    text: 'Very surprised that this could be used as a small incendiary device. I used it to burn down the factory of my brother without risk of being caught. If you need to set something ablaze discreetly and with a timer this fucker is ideal.',
  },
];

// get elements
const img = document.getElementById('person-img');
const author = document.getElementById('author');
const job = document.getElementById('job');
const info = document.getElementById('info');

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const randomBtn = document.querySelector('.random-btn');

// set starting item

let currentItem = 0;

// load initial item

window.addEventListener('DOMContentLoaded', () => {
  console.log('shake and bake');
  showPerson(currentItem);
});

function showPerson(person) {
  const item = reviews[person];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  info.textContent = item.text;
}

nextBtn.addEventListener('click', () => {
  currentItem++;
  if (currentItem > reviews.length - 1) {
    currentItem = 0;
  }
  showPerson(currentItem);
  console.log(currentItem);
});

prevBtn.addEventListener('click', () => {
  currentItem--;
  if (currentItem < 0) {
    currentItem = reviews.length - 1;
  }
  showPerson(currentItem);
  console.log(currentItem);
});

// random person

randomBtn.addEventListener('click', () => {
  let randomNo = Math.floor(Math.random() * reviews.length);
  if (randomNo == currentItem) {
    randomNo = Math.floor(Math.random() * reviews.length);
  }
  if (randomNo != currentItem) {
    currentItem = randomNo;
  }
  showPerson(currentItem);
  console.log(currentItem);
});