JS slider события

Question

'use strict';

const slider = document.querySelector('[data-id="viewer"]');
const photoSlider = slider.querySelector('[data-id="photo"]');
const prevButton = slider.querySelector('[data-action="prev"]');
const nextButton = slider.querySelector('[data-action="next"]');

const photos = [
    { id: 1, src: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png', alt: 'Title 1', },
    { id: 2, src: 'https://www.apple.com/newsroom/images/values/corporate/Apple_google-partner-on-covid-19-contact-tracing-technology_04102020_LP_hero.jpg.og.jpg', alt: 'Title 2', },
    { id: 3, src: 'https://cdn.logo.com/hotlink-ok/logo-social.png', alt: 'Title 3', },
    { id: 4, src: 'https://cdn.dribbble.com/users/10882/screenshots/15172621/media/cd2246d5d0f54f9a4316bd4d276764b2.png?compress=1&resize=400x300', alt: 'Title 4', },
];

const postWidgets = {
    rootEl: slider,
    photoSlider,
    prevButton,
    nextButton,
};

function bindPhotoToViewer(photo, el) {
    photos['id'] = 1;
    el.photoSlider.src = photos.src;
    el.photoSlider.alt = photos.alt;
};


bindPhotoToViewer(photos, postWidgets);

if (photos['id'] === 1 || photos['id'] === 0) {
    prevButton.disabled = true;
} else if (photos['id'] > 1) {
    prevButton.disabled = false;
    prevButton.addEventListener('click', () => {
        photos['id']--;
    });
};


nextButton.addEventListener('click', () => {
    if (photos['id'] === 4) {
        nextButton.disabled = true;
    } else {
        photos['id']++;
    };
});

<div data-id="viewer">
    <div>
      <img data-id="photo" src="" alt="">
    </div>
    <div>
      <button data-action="prev">←</button>
      <button data-action="next">→</button>
    </div>
  </div>

Как всё должно работать:

При загрузке страницы в Viewer загружается первое фото, кнопка "предыдущее" отключена
При нажатии на "следующее" загружаетсю второе фото, кнопка "предыдущее" включается
И так пока не дойдём до последнего фото (т.е. нажали "следующее" 3 раза), после того, как дошли, кнопка "следующее" отключается
То же самое в обратном порюдке

Answer 1

Слегка упростил.

'use strict';

const slider = document.querySelector('[data-id="viewer"]');
const photoSlider = slider.querySelector('[data-id="photo"]');
const prevButton = slider.querySelector('[data-action="prev"]');
const nextButton = slider.querySelector('[data-action="next"]');

const photos = [
    { id: 1, src: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png', alt: 'Title 1', },
    { id: 2, src: 'https://www.apple.com/newsroom/images/values/corporate/Apple_google-partner-on-covid-19-contact-tracing-technology_04102020_LP_hero.jpg.og.jpg', alt: 'Title 2', },
    { id: 3, src: 'https://cdn.logo.com/hotlink-ok/logo-social.png', alt: 'Title 3', },
    { id: 4, src: 'https://cdn.dribbble.com/users/10882/screenshots/15172621/media/cd2246d5d0f54f9a4316bd4d276764b2.png?compress=1&resize=400x300', alt: 'Title 4', },
];

const postWidgets = {
    rootEl: slider,
    photoSlider,
    prevButton,
    nextButton,
};

function bindPhotoToViewer(photo, el) {
    el.photoSlider.src = photo.src;
    el.photoSlider.alt = photo.alt;
    prevButton.disabled = current == 0
    nextButton.disabled = current == photos.length - 1;

};
let current = 0;
bindPhotoToViewer(photos[current], postWidgets);

prevButton.disabled = true;
prevButton.addEventListener('click', () => {
    current--;
    bindPhotoToViewer(photos[current], postWidgets);
});

nextButton.addEventListener('click', () => {
    current++;
    bindPhotoToViewer(photos[current], postWidgets);

});

<div data-id="viewer">
    <div>
      <img data-id="photo" src="" alt="">
    </div>
    <div>
      <button data-action="prev">←</button>
      <button data-action="next">→</button>
    </div>
  </div>

БЛОГ НА HUSL

JS slider события

Ответы (1 шт):