Slider/script.js at main · M0R03ik/Slider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
let images = [
  {
    url: './assets/RostovAdmiral.png',
    title: 'Rostov-on-Don, Admiral',
    city: 'Rostov-on-Don',
    apartments: 'LCD admiral',
    area: '81',
    repairTime: '3.5 months',
    repairCost: 'Upon request',
  },
  {
    url: './assets/Sochi.png',
    title: 'Sochi Thieves',
    city: 'Sochi',
    apartments: 'Thieves',
    area: '105',
    repairTime: '4 months',
    repairCost: 'Upon request',
  },
  {
    url: './assets/RostovPatriotic.png',
    title: 'Rostov-on-Don Patriotic',
    city: 'Rostov-on-Don',
    apartments: 'Patriotic',
    area: '93',
    repairTime: '3 months',
    repairCost: 'Upon request',
  },
]

function initSlider() {
  const sliderImage = document.querySelector('.slider__image')
  const sliderTitles = document.querySelector('.slider__titles')
  const parameters = document.querySelector('.parameters')
  const dots = document.querySelector('.slider-controls__dots')
  let currentImage = 0
  let newImage = currentImage

  initArrows()
  initDots()
  initTitles()
  showImage(newImage)

  function initDots() {
    images.forEach((image, index) => {
      const dot = document.createElement('div')
      dot.classList.add('slider-controls__dot')
      dots.appendChild(dot)
      dot.addEventListener('click', () => {
        showImage(index)
        currentImage = index
      })
    })
  }

  function initTitles() {
    images.forEach((image, index) => {
      const title = document.createElement('div')
      title.classList.add('slider__image-title')
      title.textContent = image.title
      sliderTitles.appendChild(title)
      title.addEventListener('click', () => {
        showImage(index)
        currentImage = index
      })
    })
  }

  function showParameters(index) {
    let content = `<li class="parameters__item">
    <h2 class="parameters__title">City:</h2>
    ${images[index].city}<br>
    ${images[index].apartments}
  </li>
  <li class="parameters__item">
    <h2 class="parameters__title">apartment area:</h2>
    ${images[index].area} m<sup>2</sup>
  </li>
  <li class="parameters__item">
    <h2 class="parameters__title">Repair time:</h2>
    ${images[index].repairTime}
  </li>
  <li class="parameters__item">
    <h2 class="parameters__title">Repair Cost:</h2>
    ${images[index].repairCost}
  </li>`

    parameters.innerHTML = content
  }

  function showImage(index) {
    showParameters(index)
    sliderImage.style.backgroundImage = `url(${images[index].url})`
    sliderTitles.childNodes[currentImage].classList.remove('active')
    sliderTitles.childNodes[index].classList.add('active')

    dots.childNodes[currentImage].classList.remove('active')
    dots.childNodes[index].classList.add('active')
  }

  function initArrows() {
    let arrows = document.querySelectorAll('.slider-controls__arrow')
    arrows.forEach(arrow => {
      arrow.addEventListener('click', () => {
        if (arrow.classList.contains('arrow-left')) {
          newImage = currentImage === 0 ? images.length - 1 : currentImage - 1
        } else {
          newImage = currentImage === images.length - 1 ? 0 : currentImage + 1
        }
        showImage(newImage)
        currentImage = newImage
      })
    })
  }
}

document.addEventListener('DOMContentLoaded', initSlider)