Splide JS слайдер - если ПОСЛЕДНИЙ или ПЕРВЫЙ элемент слайда массива возвращает нулевую ошибку

Question

Я использую слайдер Splide JS. Я создал две кнопки для отображения предыдущего / следующего родственного элемента innerText на основе текущего активного индекса.

Я заменяю, например, 2019, 2020, 2021, и т. Д. c, если текущий - 2020, предыдущая кнопка - 2019, а следующая - 2021.

Я могу go к следующему и предыдущему. Однако, когда я дохожу до последнего слайда, я получаю ошибку «TextContent / Innertext», равную NULL. Та же история, когда я переворачиваю ее.

Мой код:

import Splide from '@splidejs/splide';

(() => {
    const timeline = document.querySelector('.timeline-container');

    if (!timeline) {
        return;
    }

    const map = document.querySelector('[data-gebiedsontwikkeling="map"]');
    const navigation = document.querySelector(
        '[data-gebiedsontwikkeling="navigatie"]'
    );

    // Navigatie buttons
    let btnPrevYear = document.querySelector('.btn--slide-prev');
    let btnNextYear = document.querySelector('.btn--slide-next');

    // Map opties
    const mapOptions = {
        // Start bij 2de (0 index).
        lazyLoad: 'nearby',
        pagination: false,
        arrows: false,
        start: 1,
        perPage: 1,
        type: 'fade'
    };

    // Navigatie opties
    const navigationOptions = {
        isNavigation: false,
        pagination: false,
        drag: false,
        easing: 'cubic-bezier(.785, .135, .15, .86)',
        focus: 'center',
        fixedWidth: '8rem',
        width: '27rem',
        gap: '1rem',
        // perPage: 1,
        start: 1
    };

    // Gebiedsontwikkeling - map
    const YearMapSlider = new Splide(map, mapOptions);

    // Gebiedsontwikkeling - navigatie
    const YearNavSlider = new Splide(navigation, navigationOptions).mount();

    // Sync Map & Jaar slider.
    YearMapSlider.sync(YearNavSlider).mount();

    // Events & Functions
    const onActiveSlide = (value) => {
        let currentIndex = value.index;
        let previousYear = value.slide.previousElementSibling.textContent;
        let nextYear = value.slide.nextElementSibling.textContent;

        // Show Next & Previous Year inside button.
        btnPrevYear.innerText = previousYear;
        btnNextYear.innerText = nextYear;

        console.log(currentIndex);
        console.log(value);
    };

    YearNavSlider.on('active', onActiveSlide.bind(this));
    // YearNavSlider.on('arrows:updated', onMounted.bind(this));
})();

Я всегда сталкиваюсь с этим проблема внутри массивов.

URL-адрес API: https://splidejs.com/

Попытка добавить ПРОВЕРКУ, если последний элемент внутри массива делает что-то еще и отменяет.

Answer 1

Решено, добавив ПРОВЕРКУ, если существуют previousElementSibling и nextElementSibling, затем обновите текстовое значение.