Question

我在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设置为{{1} }，并将hidden设置为animation:name。

我不知道是什么原因造成的，有没有办法解决此问题？

Wow.js无法在循环内使用滑块

0 个答案: