Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (2)

Лучшие ответы пользователя

Все ответы (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
    Ответ написан
    3 комментария