Wow.js не работает с ползунком внутри цикла - PullRequest
Новая
       26

Wow.js не работает с ползунком внутри цикла

0 голосов
/ 29 мая 2019

У меня есть слайдер внутри цикла php, который использует wow.js для анимации перехода, первый слайд работает хорошо, но второй слайд не отображается, вот код слайдера: 

@foreach($something as $some)
<div class="swiper-slide">
    <div class="container-fluid content-container project-content-container">
        <div class="row mb-3">
            <div class="col-12 col-md-7 p-0 wow fadeInDown" data-wow-duration="2s">
                <a href="/path/{{$some->id}}" >
                    <img class="img-fluid slider-img project-slider-img" src="{{ $some->media->first()->getUrl() }}"  alt="{{ $some->title }}"/>
                </a>
            </div>
            <div class="col-12 col-md-4 slide-caption-box text-left align-self-end wow fadeInUp" data-wow-duration="2s">
                <a href="/path/{{$some->id}}">
                    <h3 class="font-weight-bold text-uppercase">
                        {{ $some->title }}
                    </h3>
                    <div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
                        {!! $some->short_description  !!}
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
@endforeach

ползунок также вызывает событие каждый раз, когда изменяется ползунок, и я инициализирую wow.js каждый раз, когда ползунок изменяет, вот код: 

swiper.on('slideChange', function () {
  wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       false,       // default
      live:         true        // default
    }
  )
  wow.init(); 
});

это должно было инициализировать анимацию, но это не сработало, поэтому я попытался проверить второй слайд div и обнаружил, что к нему добавлен тег style, а для visibility установлено значение hidden и animation:name установлено на none.

Я не знаю, что является причиной этого, есть ли способ решить эту проблему?

...