Как найти элемент, который находится после последнего видимого слайда?

Код ниже позволяет получить первый видимый слайд после прокрутки или нажатия кнопок. Как можно реализовать получение следующего слайда, который следует за последним видимым слайдом?
  • 17 января 2025 г. 14:23
Ответы на вопрос 2
Для того чтобы получить элемент, который идет после последнего видимого слайда в карусели или слайдере, нужно учесть, каким образом вы определяете "последний видимый слайд". Предполагая, что у вас уже есть логика для определения первого видимого слайда, вы можете использовать следующую стратегию:

1. Получите все слайды в слайдере.
2. Определите последний видимый слайд.
3. Найдите слайд, который идет сразу после последнего видимого слайда.

Ниже приведен пример кода, который демонстрирует, как это можно реализовать на JavaScript, предположим, что у вас есть массив `slides`, содержащий элементы слайдов.

```javascript
// Пример массива слайдов
const slides = document.querySelectorAll('.slide');

// Функция для получения видимых слайдов
function getVisibleSlides() {
  return Array.from(slides).filter(slide => {
    return slide.offsetWidth > 0 && slide.offsetHeight > 0; // Проверяем, что слайд видим
  });
}

// Получаем все видимые слайды
const visibleSlides = getVisibleSlides();

// Если есть видимые слайды, находим последний
if (visibleSlides.length > 0) {
  const lastVisibleSlide = visibleSlides[visibleSlides.length - 1];
  
  // Находим индекс последнего видимого слайда
  const lastVisibleIndex = Array.from(slides).indexOf(lastVisibleSlide);
  
  // Получаем слайд, который идет сразу после последнего видимого
  const nextSlide = slides[lastVisibleIndex + 1];

  // Проверяем, существует ли следующий слайд
  if (nextSlide) {
    console.log('Следующий слайд:', nextSlide);
  } else {
    console.log('Следующего слайда нет.');
  }
} else {
  console.log('Нет видимых слайдов.');
}
```

В этом коде мы:
1. Получаем все элементы слайдов.
2. Фильтруем их, чтобы получить только видимые слайды.
3. Определяем последний видимый слайд и находим слайд, который идет за ним. 

Этот подход должен заработать, если ваш разметка соответствует приведенному примеру, и вы можете его адаптировать под свои нужды.
Отталкивайтесь от параметров slideFullyVisibleClass или slideVisibleClass (классы по умолчанию swiper-slide-fully-visible и swiper-slide-visible)
Похожие вопросы