当我点击下一个或上一个链接时,JQuery Carousel会闪烁

时间:2017-08-23 21:50:41

标签: jquery carousel

我正在创建一个轮播以显示自定义帖子类型。循环工作正常,我设法完全按照我想要的方式获得布局。但是,当用户点击下一个/上一个链接时,在转换后,轮播将闪烁,然后再次弹出。

以下是现场演示的链接:https://goace.vc/teste-exits/

轮播代码:

        <div id="exits" class="carousel" data-ride="carousel">
            <div class="carousel-inner" role="listbox">

              <?php
              $current = 0;

              if( $exits->have_posts() ): while( $exits->have_posts() ) : $exits->the_post();

                if ($current == 0) {
                  $exitStatus = 'active';
                } else {
                  $exitStatus = '';
                }
                ?>

                <?php if ($current % 2 === 0) { ?>
                  <div class="item <?=$exitStatus?>">
                <?php } ?>


                <div class="col-sm-6">
                    <div class="exit-box">
                      <div class="col-xs-7">
                        <div class="exit-img" style="background-image: url('https://goace.vc/wp-content/uploads/2017/04/0028_Fundacity.png')"></div>
                      </div>
                      <div class="col-xs-5 exit-details">
                        <h3><?= get_the_title(); ?></h3>
                        <hr>
                        <p><?= the_excerpt(); ?></p>
                        <hr class="half-line">
                        <?php
                          $tipoExit = wp_get_post_terms(get_the_ID(), 'tipo_exit', array("fields" => "names"));
                          $anoExit = wp_get_post_terms(get_the_ID(), 'ano_do_exit', array("fields" => "names"));
                        ?>
                        <p><small>Exit: <b><?= $tipoExit[0] ?></b><br>Ano: <b><?= $anoExit[0] ?></b></small></p>
                      </div>
                    </div>
                  </div>

                  <?php
                    $current++;
                    if ($current % 2 === 0) {
                  ?>
                    </div>
                  <?php } ?>

                <?php endwhile; endif; ?>

              </div>
                <a data-slide="prev" href="#exits" class="left carousel-control">‹</a>
                <a data-slide="next" href="#exits" class="right carousel-control">›</a>
              </div>

是什么导致了这个?

非常感谢!

1 个答案:

答案 0 :(得分:2)

理想情况下,代码最好。但是,通过检查网站,类slider似乎在滑动时刷新轮播,它会添加设置此行为的in_progress类。

您可以从元素slide

中删除课程<div id="exits" class="carousel slide" data-ride="carousel">

为:

<div id="exits" class="carousel" data-ride="carousel">

这将停止闪烁,但会移除滑块效果(图像仍会切换,但没有视觉效果)。如果您共享相关代码,我们可以尝试从那里解决它。