如何在wordpress Orbit Slider F6中循环
如何在wordpress Orbit Slider F6中循环
提问于 2017-05-16 02:58:09
我有在html上的轨道滑块的html完美地工作，但当我试图在wordpress上循环它时出了点问题，导航项目和箭头只有一次点击就能工作。
<div class="slider-options">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-2x"></i></button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x"></i></button>
<li class="orbit-slide">
<img class="orbit-image" src="img/slider-img.jpg" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="img/slider-img.jpg" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="img/slider-img.jpg" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="img/slider-img.jpg" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
</div>这是我的wordpress循环：
<div class="slider-options">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-2x"></i></button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x"></i></button>
<?php
$args1 = array(
'posts_per_page' => 3,
'category' => 'slider',
);
$query1 = new WP_Query( $args1 ); ?>
<?php if ( $query1->have_posts() ) : ?>
<?php while ( $query1->have_posts() ) : $query1->the_post(); ?>
<li class="orbit-slide">
<?php the_post_thumbnail('slider', array('class' => 'orbit-image')); ?>
<figcaption class="orbit-caption"><?php the_title(); ?></figcaption>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
</div>回答 1
Stack Overflow用户
发布于 2017-08-18 04:38:17
你应该做两个循环。第一个循环应该只显示1个post，这将是活动幻灯片。第二个循环显示了剩余的offset => 1
<div class="slider-options">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-2x"></i></button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x"></i></button>
<?php
$args1 = array(
'posts_per_page' => 1,
'category' => 'slider',
);
$query1 = new WP_Query( $args1 ); ?>
<?php if ( $query1->have_posts() ) : ?>
<?php while ( $query1->have_posts() ) : $query1->the_post(); ?>
<li class="orbit-slide is-active">
<?php the_post_thumbnail('slider', array('class' => 'orbit-image')); ?>
<figcaption class="orbit-caption"><?php the_title(); ?></figcaption>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php
$args1 = array(
'posts_per_page' => -1,
'category' => 'slider',
'offset' => 1
);
$query1 = new WP_Query( $args1 ); ?>
<?php if ( $query1->have_posts() ) : ?>
<?php while ( $query1->have_posts() ) : $query1->the_post(); ?>
<li class="orbit-slide">
<?php the_post_thumbnail('slider', array('class' => 'orbit-image')); ?>
<figcaption class="orbit-caption"><?php the_title(); ?></figcaption>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43986892
复制相关文章
相似问题
腾讯云开发者
