如何解决项目活动和数据源部分在Bootstrap旋转木马缩略图为Wordpress？ [英] How to solve item active and datasource part in Bootstrap carousel thumbnail for Wordpress?
本文介绍了如何解决项目活动和数据源部分在Bootstrap旋转木马缩略图为Wordpress？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚刚试图在产品滑块中加入一个带有缩略图的引导式转盘。
这是html版本，其中i我试图改为Wordpress
http://codepen.io/RetinaInc/pen/rxksh
顶部现在工作，所以我尝试类似的方法缩略图滑块部分，但无法修复
运行下面的代码，因为它是给语法错误，所以删除缩略图部分，并替换为html然后主滑块工作。但我希望缩略图滑块可以使用它。
<？php get_header（）;？>
< div class =container>
< div class =content>
< div class =row>
<？php if（have_posts（））：while（have_posts（））：the_post（）; ？>
< div class =col-sm-6>
< div id =carouselclass =carousel slidedata-ride =carousel>
< div class =carousel-inner>
<？php
$ image_args = array（
'post_type'=>'attach'，
'numberposts'=> -1，
'post_status '=> null，
'post_parent'=> $ post-> ID，
'post_mime_type'=>'image'，
'exclude'=> $ current_featured_image_id
）;
$ attachments = get_posts（$ image_args）;
if（$ attachments）{
$ i = 1;
foreach（$ attachments as $ attachment）{？>
< div class =
<？php
echo'';
echo'item';
if（$ i == 1 ）{
echo'active';
}
$ i ++;
echo'';
？>>
<？php
echo wp_get_attachment_image（$ attachment-> ID，'image'）;
？>
< / div>
<？php
}
}
？
< / div>
< / div>
< div class =clearfix>
< div id =thumbcarouselclass =carousel slidedata-interval =false>
< div class =carousel-inner>
<？php
$ thumb_args = array（
'post_type'=>'attachment'，
'numberposts'=> -1，
'post_status'=> null，
'post_parent'=> $ post-> ID，
'post_mime_type'=>'image'，
'exclude'=> ; $ current_featured_image_id，
）;
$ thumb_attachments = get_posts（$ thumb_args）;
if（$ thumb_attachments）{
$ i = 1;
foreach（$ thumb_attachments as $ thumbattachment）{？>
<？php
}
？>
<？php
if（（$ count％4）== 0）
{
？
< div class =
<？php
echo'';
echo'item';
if（$ i == 1）{
echo'active';
}
$ i ++;
echo'';
？>>
<？php $ count = 1;？>
< div data-target =＃carouseldata-slide-to =<？php echo $ count ++;？> class =thumb>< img src =img / doubleRound / front_side.JPGwidth =100height =100>< / div>
<？php $ count ++;？>
< / div><！ - / item - >
<？php
}
？>
< / div><！ - / carousel-inner - >
< a class =left carousel-controlhref =＃thumbcarouselrole =buttondata-slide =prev>
< span class =glyphicon glyphicon-chevron-left>< / span>
< / a>
< a class =right carousel-controlhref =＃thumbcarouselrole =buttondata-slide =next>
< span class =glyphicon glyphicon-chevron-right>< / span>
< / a>
< / div> <！ - / thumbcarousel - >
< / div><！ - / clearfix - >
< / div>
< div class =col-sm-6>
< div id =carouselclass =carousel slidedata-ride =carousel>
< div class =carousel-inner>
< div class =item active>
< img class =imagesrc =img / doubleRound / all-parts.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / doubleRound / top.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / doubleRound / bottom.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / doubleRound / front.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / dualRound / front_side.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / doubleRound / front.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / doubleRound / all-parts.JPG>
< / div>
< div class =item>
< img class =imagesrc =img / doubleRound / all-parts.JPG>
< / div>
< / div>
< / div>
< div class =clearfix>
< div id =thumbcarouselclass =carousel slidedata-interval =false>
< div class =carousel-inner>
< div class =item active>
< div data-target =＃carouseldata-slide-to =0class =thumb>< img src =img / doubleRound / all-parts.JPGwidth = 100height =100>< / div>
< div data-target =＃carouseldata-slide-to =1class =thumb>< img src =img / doubleRound / top.JPGwidth = height =100>< / div>
< div data-target =＃carouseldata-slide-to =2class =thumb>< img src =img / doubleRound / bottom.JPGwidth = height =100>< / div>
< div data-target =＃carouseldata-slide-to =3class =thumb>< img src =img / doubleRound / front.JPGwidth = height =100>< / div>
< / div><！ - / item - >
< div class =item>
< div data-target =＃carouseldata-slide-to =4class =thumb>< img src =img / doubleRound / front_side.JPGwidth =100 height =100>< / div>
< div data-target =＃carouseldata-slide-to =5class =thumb>< img src =img / doubleRound / front.JPGwidth = height =100>< / div>
< div data-target =＃carouseldata-slide-to =6class =thumb>< img src =img / doubleRound / all-parts.JPGwidth = 100height =100>< / div>
< div data-target =＃carouseldata-slide-to =7class =thumb>< img src =img / doubleRound / all-parts.JPGwidth = 100height =100>< / div>
< / div><！ - / item - >
< / div><！ - / carousel-inner - >
< a class =left carousel-controlhref =＃thumbcarouselrole =buttondata-slide =prev>
< span class =glyphicon glyphicon-chevron-left>< / span>
< / a>
< a class =right carousel-controlhref =＃thumbcarouselrole =buttondata-slide =next>
< span class =glyphicon glyphicon-chevron-right>< / span>
< / a>
< / div> <！ - / thumbcarousel - >
< / div><！ - / clearfix - >
< / div> <！ - / col-sm-6 - >
< div class =col-sm-6>
< h2>产品< / h2>
< h3><？php the_title_attribute（）; > ;:< / h3>
< p><？php the_content（）; ？>< / p>
< / div> <！ - / col-sm-6 - >
<？php endwhile; else：？>
< p><？php _e（'对不起，没有符合您条件的帖子。 ？>< / p>
<？php endif; ？>
< / div> <！ - / row - >
< / div>
< / div> <！ - / container - >
<？php get_footer（）;？>
解决方案
如果您以更简单的方式
$ thumb_attachments = get_posts（$ thumb_args）;
do
if（$ thumb_attachments）{
$ j = 1; $ count = 0;
之后
<$> c $ c> foreach（$ thumb_attachments as $ thumbattachment）{？>
使用
if（（$ count％4）== 0）
{
if（$ j == 1）{
echo'< div class = item active>';
}
else
{
echo'< / div><！ - / item - >< div class =item>';
}
$ j ++;
？>
当我尝试时，这个工作。
I just tried to include a bootstrap powered carousal with thumbnail for my product slider. Some how I am able to do that for the main image (big image) but I am not able to fix the issues for thumbnail part.
This is html version which i am trying to change to Wordpress http://codepen.io/RetinaInc/pen/rxksh
The top part is now working so i tried similar approach for thumbnail slider part but couldn't fix it running the code below as it is gives syntax error so remove thumbnail part and replace it with html then main slider works. but i want the thumbnail slider to work with it.
<?php get_header();?>
<div class="container">
<div class="content">
<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-sm-6">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<?php
$image_args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'exclude' => $current_featured_image_id,
);
$attachments = get_posts( $image_args );
if ( $attachments ) {
$i = 1;
foreach ( $attachments as $attachment ) {?>
<div class=
<?php
echo '"';
echo 'item ';
if ($i == 1) {
echo 'active';
}
$i++;
echo '"';
?>>
<?php
echo wp_get_attachment_image( $attachment->ID, 'image' );
?>
</div>
<?php
}
}
?>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<?php
$thumb_args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'exclude' => $current_featured_image_id,
);
$thumb_attachments = get_posts( $thumb_args );
if ( $thumb_attachments ) {
$i = 1;
foreach ( $thumb_attachments as $thumbattachment ) {?>
<?php
}
?>
<?php
if (($count % 4) == 0)
{
?>
<div class=
<?php
echo '"';
echo 'item ';
if ($i == 1) {
echo 'active';
}
$i++;
echo '"';
?>>
<?php $count= 1;?>
<div data-target="#carousel" data-slide-to="<?php echo $count++; ?>" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
<?php $count++;?>
</div><!-- /item -->
<?php
}
?>
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div>
<div class="col-sm-6">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<img class="image" src="img/doubleRound/all-parts.JPG">
</div>
<div class="item ">
<img class="image" src="img/doubleRound/top.JPG">
</div>
<div class="item">
<img class="image" src="img/doubleRound/bottom.JPG">
</div>
<div class="item">
<img class="image" src="img/doubleRound/front.JPG">
</div>
<div class="item">
<img class="image" src="img/doubleRound/front_side.JPG">
</div>
<div class="item">
<img class="image" src="img/doubleRound/front.JPG">
</div>
<div class="item">
<img class="image" src="img/doubleRound/all-parts.JPG">
</div>
<div class="item">
<img class="image" src="img/doubleRound/all-parts.JPG">
</div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
<div class="col-sm-6">
<h2>Products</h2>
<h3><?php the_title_attribute(); ?>: </h3>
<p><?php the_content(); ?></p>
</div> <!-- /col-sm-6 -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div> <!-- /row -->
</div>
</div> <!-- /container -->
<?php get_footer();?>
解决方案
Your code will work if you do it in simpler manner as wingskush have suggested with addition of another variable.
after
$thumb_attachments = get_posts( $thumb_args );
do
if ( $thumb_attachments ) {
$j = 1; $count = 0;
after
foreach ( $thumb_attachments as $thumbattachment ) {?>
use
if (($count % 4) == 0)
{
if ($j == 1) {
echo '<div class="item active">';
}
else
{
echo '</div><!-- /item --><div class="item">';
}
$j++;
?>
This worked when i tried.
这篇关于如何解决项目活动和数据源部分在Bootstrap旋转木马缩略图为Wordpress？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
