| 1 | let featuedImg = document.getElementById('featured-image');
|
|---|
| 2 | let smallImgs = document.getElementsByClassName('small-Img');
|
|---|
| 3 |
|
|---|
| 4 | smallImgs[0].addEventListener('click', () => {
|
|---|
| 5 | featuedImg.src = smallImgs[0].src;
|
|---|
| 6 | smallImgs[0].classList.add('sm-card')
|
|---|
| 7 | smallImgs[1].classList.remove('sm-card')
|
|---|
| 8 | smallImgs[2].classList.remove('sm-card')
|
|---|
| 9 | smallImgs[3].classList.remove('sm-card')
|
|---|
| 10 | })
|
|---|
| 11 | smallImgs[1].addEventListener('click', () => {
|
|---|
| 12 | featuedImg.src = smallImgs[1].src;
|
|---|
| 13 | smallImgs[0].classList.remove('sm-card')
|
|---|
| 14 | smallImgs[1].classList.add('sm-card')
|
|---|
| 15 | smallImgs[2].classList.remove('sm-card')
|
|---|
| 16 | smallImgs[3].classList.remove('sm-card')
|
|---|
| 17 | })
|
|---|
| 18 | smallImgs[2].addEventListener('click', () => {
|
|---|
| 19 | featuedImg.src = smallImgs[2].src;
|
|---|
| 20 | smallImgs[0].classList.remove('sm-card')
|
|---|
| 21 | smallImgs[1].classList.remove('sm-card')
|
|---|
| 22 | smallImgs[2].classList.add('sm-card')
|
|---|
| 23 | smallImgs[3].classList.remove('sm-card')
|
|---|
| 24 | })
|
|---|
| 25 | smallImgs[3].addEventListener('click', () => {
|
|---|
| 26 | featuedImg.src = smallImgs[3].src;
|
|---|
| 27 | smallImgs[0].classList.remove('sm-card')
|
|---|
| 28 | smallImgs[1].classList.remove('sm-card')
|
|---|
| 29 | smallImgs[2].classList.remove('sm-card')
|
|---|
| 30 | smallImgs[3].classList.add('sm-card')
|
|---|
| 31 | }) |
|---|
