https://vannilla-js-basic-project-25-es6-slider.netlify.app/app.js

1import data from './data.js'
2const container = document.querySelector('.slide-container')
3const nextBtn = document.querySelector('.next-btn')
4const prevBtn = document.querySelector('.prev-btn')
5// if length is 1 hide buttons
6if (data.length === 1) {
7  nextBtn.style.display = 'none'
8  prevBtn.style.display = 'none'
9}
10// if length is 2, add copies of slides
11let people = [...data]
12if (data.length === 2) {
13  people = [...data, ...data]
14}
15container.innerHTML = people
16  .map((person, slideIndex) => {
17    const { img, name, job, text } = person
18    let position = 'next'
19    if (slideIndex === 0) {
20      position = 'active'
21    }
22    if (slideIndex === people.length - 1) {
23      position = 'last'
24    }
25    if (data.length <= 1) {
26      position = 'active'
27    }
28    return `<article class="slide ${position}">
29  <img src=${img} class="img" alt="${name}"/>
30  <h4>${name}</h4>
31  <p class="title">${job}</p>
32  <p class="text">
33   ${text}
34  </p>
35<div class="quote-icon">
36<i class="fas fa-quote-right"></i>
37</div>
38 </article>`
39  })
40  .join('')
41
42const startSlider = (type) => {
43  // get all three slides active,last next
44  const active = document.querySelector('.active')
45  const last = document.querySelector('.last')
46  let next = active.nextElementSibling
47  if (!next) {
48    next = container.firstElementChild
49  }
50  active.classList.remove('active')
51  last.classList.remove('last')
52  next.classList.remove('next')
53
54  if (type === 'prev') {
55    active.classList.add('next')
56    last.classList.add('active')
57    next = last.previousElementSibling
58    if (!next) {
59      next = container.lastElementChild
60    }
61    next.classList.remove('next')
62    next.classList.add('last')
63    return
64  }
65  active.classList.add('last')
66  last.classList.add('next')
67  next.classList.add('active')
68}
69nextBtn.addEventListener('click', () => {
70  startSlider()
71})
72prevBtn.addEventListener('click', () => {
73  startSlider('prev')
74})