Почему не добавляется класс с помощью метода addClass?

Question

[Alex_87]

Здравствуйте! Не могу понять, почему не добавляется класс opac к элементу c классом textblock? Подскажите, в чём может быть причина?

swiper.on('slideChange', function () {

  if($('.swiper-slide').hasClass('swiper-slide-active')){
   
     $('.textblock').addClass('opac');
  }
  if($('.swiper-slide').hasClass('swiper-slide-prev')){
     $('.textblock').removeClass('opac');

  }

Answer 1

[Steppp]

А класс textblock один на странице? И он вообще есть? А может js раньше html загружается? Или условие никогда не выполняются! Тут может быть много причин!
А может 2 условия выполняются, и естественно последнее удаляет класс!

Comments

[Steppp]

Ну да! Если есть класс "swiper-slide-active" то добавляется $('.textblock').addClass('opac');

И сразу же отрабатывает следующее условие, которое удаляет класс, так как на странице полюбому есть класс 'swiper-slide-prev'

[Alex_87]

Steppp, да, вы правы! Вот html код:

<div class="special-slider-container">
  <div class="swiper-container">
    
    <div class="swiper-wrapper">
       <div class="swiper-slide card"><img src="images/carousel_1.png" alt=""><h1 class="textblock" style="position: absolute; color:#fff">HELLO WORLD 1</h1></div>
      <div class="swiper-slide card"><img src="images/carousel_1.png" alt=""><h1 class="textblock" style="position: absolute; color:#fff">HELLO WORLD 2</h1></div>
       <div class="swiper-slide card"><img src="images/carousel_1.png" alt=""><h1 class="textblock" style="position: absolute; color:#fff">HELLO WORLD 3</h1></div>
     
    </div>
    
    <!-- <button class="swiper-button-prev"></button>
    <button class="swiper-button-next"></button> -->
  </div>
</div>

А вот сама консоль:

[Alex_87]

Steppp, как в этом случае правильно написать js код?

[Alex_87]

Steppp, я понял как это сделать, но я не знаю как это синтаксически описать. Если значение аттрибута data-swiper-slide-index = 1, то в этом случае мы добавляем элементу с классом textblock класс opac, если нет, тогда удаляем. Но как определить нужный textblock? Ведь их 3 на странице. Возможно здесь this сыграл бы роль...

Я пишу так, но это не правильно...

swiper.on('slideChange', function () {

  if($('.swiper-slide').data('swiper-slide-index') == 1){
   
     $('.textblock').addClass('opac');
  }
  if($('.swiper-slide').data('swiper-slide-index') == 0 || $('.swiper-slide').data('swiper-slide-index') == 2){
   
   $('.textblock').removeClass('opac');
}

[Steppp]

Alex_87, Изменить условие! Что должно происходить?
Я так понял блок с текстом это и есть слайд? Тогда вообще не надо никаких условий!
demo

[Alex_87]

Steppp, Плавное появление текста на том слайдере, на котором data-swiper-slide-index = 1. класс textblock содержит opacity: 0, а класс opac, который мы добавляем, содержит opacity: 1

[Steppp]

Alex_87, Можно просто добавлять класс, а по таймеру удалять!

[Alex_87]

Steppp, по таймеру не хотелось бы. По атрибуту было бы идеально, но я не знаю как это реализовать... Вот код: https://codepen.io/Alexei_87/pen/poyvLQZ?editors=1111

[Steppp]

Alex_87, Сейчас что нибудь придумаю)

[Steppp]

Steppp, Вообщем есть у swiper, такое своство, как slideActiveClass: `opac`,
И его можно попробовать стилизовать!
Тоесть, мы swiper-slide активному эл задаем класс "opac" А в css надо прописать стили, примерно так

.opac p{
  opacoty: 1;
  transition: 0.3s;
}

Но тут проблемка, когда переключается слайд на активный эл, то "opac" исчезает!

[Alex_87]

Steppp, да, он работает. Жаль, что при этом свойство нельзя поставить ребёнку класс opac. А так он выглядит как бесполезное свойство. Может какие-то другие есть?

[Steppp]

Alex_87,
можно попробовать так же анимировать исчезновение)

[Alex_87]

Steppp, браво, у вас получилось!!! Благодарю за помощь! У меня тоже вышло, но я пошёл иным путём. Взгляните ещё раз: https://codepen.io/Alexei_87/pen/poyvLQZ

Единственное, не понятно, как изначально при загрузке страницы сделать так, чтобы у элемента с классом textblock был класс opac

[Steppp]

Alex_87, Это из за анимации! Тоесть слайдер запускается уже на слайде, и включается анимация появления!
А когда слайд начинает перелистываться, и анимация запускается!
На скриншоте не работает, но можно по игратся со стилями!) Это выбран первый слайд! Может там нулевой слайд надо выбрать! Надо пробовать)

on: {
    init: function () {
      const slideStart = document.querySelectorAll(`.swiper-wrapper p`);
      slideStart[1].style.cssText = `transition: 0s; opacity: 1;`
    },
  },

Answer 2

[ivashjke]

если у вас .textblock - это элемент внутри слайда
то при slideChange сначала $('.swiper-slide .textblock').removeClass('opac'); а затем
$('.swiper-slide-active .textblock').addClass('opac');

класс добавляется только он сразу удаляется и если у вас textblock именно элемент внутри слайда то по вашему коду - сначала всем этим блокам добавляется класс opac а затем сразу удаляется
потому что каждый элемент slick - это swiper-slide

Comments

[Alex_87]

я понял как это сделать, но я не знаю как это синтаксически описать. Если значение аттрибута data-swiper-slide-index = 1, то в этом случае мы добавляем элементу с классом textblock класс opac, если нет, тогда удаляем. Но как определить нужный textblock? Ведь их 3 на странице. Возможно здесь this сыграл бы роль...

[ivashjke]

для правильной подсказки куда смотреть - нужно видеть реализацию или хотя бы скрин с обьяснением как должно работать - гадать можно долго

[Alex_87]

ivashjke, https://codepen.io/Alexei_87/pen/poyvLQZ?editors=1111