如何在wordpress动态观察滑块F6中循环
我有html的轨道滑块在html上完美地工作,但当我试图在wordpress上循环它时,出现了一些错误,导航项目符号和箭头只需单击一次即可工作如何在wordpress动态观察滑块F6中循环,wordpress,loops,slider,orbit,Wordpress,Loops,Slider,Orbit,我有html的轨道滑块在html上完美地工作,但当我试图在wordpress上循环它时,出现了一些错误,导航项目符号和箭头只需单击一次即可工作 <div class="slider-options"> <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> <ul class="orbit-container"&
<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>
上一张幻灯片;
下一张幻灯片;
-
第一张幻灯片详细信息。当前幻灯片
第二张幻灯片的细节。
第三张幻灯片详细信息。
第四张幻灯片的细节。
你应该做两个循环。第一个循环应该只显示一个post,这将是活动幻灯片。第二个循环以偏移量=>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>
上一张幻灯片;
下一张幻灯片;
-
-
第一张幻灯片详细信息。当前幻灯片
第二张幻灯片的细节。
第三张幻灯片详细信息。
第四张幻灯片的细节。