Здравствуйте! я хочу добиться плавного появления текста на том слайдере, который активный в данный момент(имеет класс swiper-slide-active) и исчезали бы при наличии у них класса swiper-slide-prev
Помогите подправить пожалуйста: https://codepen.io/Alexei_87/pen/poyvLQZ
Тебе нужно привязаться к одному из событий https://swiperjs.com/api/#events. Я бы пробовал сначала slideNextTransitionEnd
. Но их много, может это не то что тебе надо.
Потом тебе нужно получить доступ к DOM элементу которому меняешь классы. Попробуй создать обработчик события с аргументом (это обычная конвенция библиотек передавать объект события аргументом в обработчик события), может из объекта можно будет достать этот DOM объект. Если так не получится, что посмотри в API самого слайдера как получить доступ к текущему слайду. Остальное - вопрос добавления/удаления классов.
Подвязался к slideChange событию. Оно работает, но я класс не могу добавить. Не понимаю, почему не добавляется…
swiper.on(‘slideChange’, function () {
if($(’.swiper-slide’).hasClass(‘swiper-slide-active’)){
$(’.textblock’).addClass(’.opac’);
}
if($(’.swiper-slide’).hasClass(‘swiper-slide-prev’)){
$(’.textblock’).removeClass(’.opac’);
}
num += 1;
if(num == 4){
changeDirection();
num = 0;
}
});
Дело в тайминге и порядке операций. Лучше всего опираться не на css классы, а на внутреннее представление слайдов в самой библиотеке. Она дает индекс активного слайда, от него и отталкивайся:
on: {
slideNextTransitionEnd: function (swiper) {
console.log('CurrentActive:', swiper.activeIndex)
}
}