Можно ли задать кнопки переключения Slick Slider для ::before, ::after?

Question

[MFNIK]

Добрый день, помогите присвоить кнопки слайдера для before или after.
Из за особенностей верстки, невозможно сделать по другому.
Вот код слайдера:

$(document).ready(function(){
  $('.carousel-submenu').slick({
    infinite: false,
    slidesToShow: 6,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: $('.sub-menu:before'),
    nextArrow: $('.sub-menu:after'),
  });
});

Вот верстка сайта:

<div class="sub-menu carousel-submenu">
нужна кнопка тут ::before
       <div class="sub-menu_item">
           содержимое....
      </div>
      <div class="sub-menu_item">
           содержимое....
      </div>
      <div class="sub-menu_item">
           содержимое....
      </div>
и тут ::after
</div>

Comments

[Dymok]

кнопка slick-слайдера не может быть псевдоэлементом.
можете сделать любую разметку для кнопки с помощью параметров prevArrow и nextArrow - kenwheeler.github.io/slick

[MFNIK]

Dymok, спасибо, на будущее буду знать!

[silencer-spirit]

В JS обращаться к псевдоэлементу нельзя.

[Rustam Bainazarov]

MFNIK, и не только у Swiper. С псевдоэлементами вообще нельзя взаимодействовать с помощью JS. Это элементы стилей (CSS). Это то же самое, если бы вы пытались повесить событие на box-shadow какого-то элемента.

[MFNIK]

Dymok, silencer-spirit столкнулся с новой проблемой. Как вы поняли у меня выпадающее меню, настроен вывод карусели по 6 элементов, т.е. если меньше шести, то Arrows - display: none; , но если кол-во превышает 6, то стрелки display: block;
Так у меня несколько пунктов с выпадающим меню, и на каждом настроен данный вывод в виде карусели по 6 элементов. Но теперь если например для 1 пунка в выпадающем меню больше 6 элементов, то кнопки автоматом появляются для всех пунктов с выпадающим меню (display: block;)
Это получается для каждого пункта новый вызов карусели, с новым классом и новым классом кнопок?
На самом деле какой то брет, так не делается мне кажется!!!

[MFNIK]

Кстати вот пен для тренировок, если в любой пункт, добавить 4 подпункт, то автоматом появляется кнопка назад, вперед, на всех выпадающих меню.

Answer 1

[Merkiff]

Воспользуйтесь appendArrows:$('.carousel-submenu')
появятся 2 кнопки button сверху и снизу как раз в тех местах где это вам надо а для sub-menu_item - slick сам добавит обертку
эти кнопки потом можно стилизовать как угодно у button шрифт сделать 0px
и добавить псевдоэлементы button, то же самое можно сделать и с точками.
Это наверное не совсем подходящее решение для вас, но работать будет.