Select pseudo-element with javascript

Question

Select pseudo-element with javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

I have this pseudo class:

.swiper-pagination-v::after{
    content: "b6";
    margin: 10px;
    background-repeat: no-repeat;
}

And I need to select it because it's the arrow that makes the slider work, for this is this kind of javascript:

swiperV = new Swiper('.swiper-container-h', {
            pagination: '.swiper-pagination-h',
            paginationClickable: true,
            direction: 'vertical',
            spaceBetween: 50,
            nextButton: '.swiper-button-next-v',
            prevButton: '.swiper-button-prev-v',

where nextButton is the pseudo-class, and the thing is that I do not find anything at all.

I've tried with many selectors, attributes and nothing, to see if you can help me please. Thank you very much!

javascript jquery css

asked by Csc99 21.08.2018 в 14:55

source

2 answers

Show first word of a field in SQL Return in a ListView information of 2 models filtered by the authenticated user

score 1 · Answer 1

I do not know if I understand what you mean but as far as I know, you can not detect a click on a pseudo element like :after or :before because they do not "exist" as such in the DOM. It would be like trying to detect a click on a colored border, to understand each other. Instead of using content and: after, use backgrounds in the div and detect it directly from the div.

score 0 · Answer 2

I understand that the class you need to click on is this .swiper-button-next-v , but I see that in the API you're using you mean a nextButton and prevButton where the current API does not exist, I guess that's why it may not work for you, maybe you're using the library with the new API and trying to use a configuration script with a method old, in the current API to access the arrows or navigation buttons would be the following:

var mySwiper = new Swiper('.swiper-container-h', {
  navigation: {
    nextEl: '.swiper-button-next-v',
    prevEl: '.swiper-button-prev-v',
  },
});

and to capture the event when the slider is changing you can use:

mySwiper.on('slideChange', function () {
  console.log('slide changed');
});