Как найти отдельные элементы в слайдере?

Question

[offsiderst]

дать им например бордер (любой)
При прокручивании слайдера механику не изменять ( тоесть также последние два элемента в каждом ряде делать с бордером.
Не имеет значение с чем, главное суть
вообще тут это нужно для ховера с разных сторон)

последние два элемента в каждом ряде ( кроме того случая когда slidesPerView = 1)
https://jsfiddle.net/nLbx47eu/3/

Answer 1

[SomeSmallThings]

Начать, наверное, стоит с того, что использование сторонней библиотеки для вашей задачи (скорее всего) избыточно, достаточно разметить каждую строку отдельным классом и css селектором выделить нужный элемент.

С использованием swiper.js (из вашего примера) красивое решение тоже вряд ли получится, насколько можно судить по беглому описанию из документации, библиотека не группирует строки в разметке, соответственно весь список слайдов лежит в одном родителе и вычислить размер строки/N-последних элементов нужно самостоятельно.

Коллбэки при инициализации и изменении размера окна:

let swiper = new Swiper('.swiper-container', {
   //... остальные параметры
   on: {
      init: setBorder,
      resize: setBorder, //ИЛИ breakpoint: setBorder (если breakpoint'ы указаны при инициализации)
   }
});

Функция для коллбэков:

function setBorder(swiper) {
   if (swiper.params.slidesPerView > 1 && swiper.slides.length > swiper.params.slidesPerView) {
      //если слайды разделены хотя бы на две строки
      //считаем кол-во элементов в каждой строке
      let firstRowLength = swiper.slides.length > swiper.params.slidesPerView * swiper.params.slidesPerColumn ? Math.ceil(swiper.slides.length / 2)
         : swiper.params.slidesPerView;
      let secondRowLength = swiper.slides.length - firstRowLength;
      //в список для удобства
      let rowLength = [firstRowLength, secondRowLength];

      rowLength.forEach((length, i) => {
         //последним двум элементам в каждой строке даем стили
         swiper.slides.slice((i ? length + rowLength[i - 1] - 2 : length - 2), (i ? length + rowLength[i - 1] : length)).forEach(el => el.style.border = '4px solid #fff');
      });
   } else {
      //иной случай, очищаем стили
      swiper.slides.forEach(slide => slide.style.border = 'none');
   }
}

Пример на jsfiddle

Comments

[offsiderst]

SomeSmallThings , спасибо . но дело в том, что незасимо от того сколько элементов не выбираются последние два в каждом ряде

и плюс по умолчанию не выбраны последние ( только после скрола к концу они видны)

[SomeSmallThings]

offsiderst, в текущем варианте выделяются как раз 2 последних элемента в каждом ряду, все верно, они находятся на последнем слайде (странице):

Если нужны 2 последних элемента в видимой области на каждом слайде (странице), тогда изначально вопрос некорректно был поставлен. Получить индекс активного слайда можно через swiper.activeIndex, а затем умножить количество элементов в ряду на число прокрученных слайдов, от него и берите два последних.

[offsiderst]

SomeSmallThings, но все-равно вроде баг будет