Php 在WP中将邮件类别缩略图打印到用于旋转木马的div中
我很好地打印了我的文章类别缩略图内容——并且输出;但是它会跳出一个由CSS长度决定的Php 在WP中将邮件类别缩略图打印到用于旋转木马的div中,php,wordpress,Php,Wordpress,我很好地打印了我的文章类别缩略图内容——并且输出;但是它会跳出一个由CSS长度决定的div,当然我可以overflow:scroll并有一个基本的水平滚动我的帖子(缩略图),但是我正试图让我的WP分类帖子内容显示在旋转木马中,如图所示。我的问题在于如何将我的帖子内容(拇指)打印到单独的标记中,就像旋转木马要求滚动到的部分一样。基本上,我有下面的4个系列,根据分类ID输出大量我的帖子内容缩略图 <div class="feat_
div
,当然我可以overflow:scroll
并有一个基本的水平滚动我的帖子(缩略图),但是我正试图让我的WP
分类帖子内容显示在旋转木马中,如图所示。我的问题在于如何将我的帖子内容(拇指)打印到单独的
标记中,就像旋转木马要求滚动到的部分一样。基本上,我有下面的4个系列,根据分类ID输出大量我的帖子内容缩略图
<div class="feat_wrap_app">
<div class="viewport">
<div class="overview">
<ul class="list-unstyled">
<?php
$buy_featurepost_category_id = get_cat_ID('buy_featurepost');
query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1');
//query_posts('post_type=mobile-experience&posts_per_page=-1');
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<li class="media">
<a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">
<?php
echo get_small_thumbnail_post('experienceIcon');
?>
</a>
<!-- <div class="media-body">
<h4 class="media-heading"><a href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal"><?php the_title(); ?></a></h4>
<p><a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">Learn More</a></p>
</div> -->
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
</div>
</div>
</div>
</div><!-- // related experiences dynamic app scroll -->
</div>
<div class="feat_wrap_app">
<div class="viewport">
<div class="overview">
<ul class="list-unstyled">
<?php
$buy_featurepost_category_id = get_cat_ID('buy_featurepost');
query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1');
//query_posts('post_type=mobile-experience&posts_per_page=-1');
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<li class="media">
<a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">
<?php
echo get_small_thumbnail_post('experienceIcon');
?>
</a>
<!-- <div class="media-body">
<h4 class="media-heading"><a href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal"><?php the_title(); ?></a></h4>
<p><a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">Learn More</a></p>
</div> -->
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
</div>
</div>
</div>
</div><!-- // related experiences dynamic app scroll -->
</div>
-
使用一个数组并在此数组中循环以创建导航
<div class="feat_wrap_app">
<div class="viewport">
<div class="overview">
<ul class="list-unstyled">
<?php
$buy_featurepost_category_id = get_cat_ID('buy_featurepost');
query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1');
//query_posts('post_type=mobile-experience&posts_per_page=-1');
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<li class="media">
<a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">
<?php
echo get_small_thumbnail_post('experienceIcon');
?>
</a>
<!-- <div class="media-body">
<h4 class="media-heading"><a href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal"><?php the_title(); ?></a></h4>
<p><a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">Learn More</a></p>
</div> -->
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
</div>
</div>
</div>
</div><!-- // related experiences dynamic app scroll -->
</div>
根据您的演示:
<div class="feat_wrap_app">
<div class="viewport">
<div class="overview">
<ul class="list-unstyled">
<?php
$buy_featurepost_category_id = get_cat_ID('buy_featurepost');
query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1');
//query_posts('post_type=mobile-experience&posts_per_page=-1');
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<li class="media">
<a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">
<?php
echo get_small_thumbnail_post('experienceIcon');
?>
</a>
<!-- <div class="media-body">
<h4 class="media-heading"><a href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal"><?php the_title(); ?></a></h4>
<p><a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">Learn More</a></p>
</div> -->
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
</div>
</div>
</div>
</div><!-- // related experiences dynamic app scroll -->
</div>
<h1>Swipe 2</h1>
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<?php
$buy_featurepost_category_id = get_cat_ID('buy_featurepost');
$carouselItems = array();
$postIndex = 0;
$nbPostPerSlide = 6;
query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1');
//query_posts('post_type=mobile-experience&posts_per_page=-1');
if ( have_posts() ) while ( have_posts() ) : the_post();
$postIndex ++;
$carouselItems[] = $post->ID;
?>
<?php
/**
* open the div slide
*/
?>
<?php if($postIndex === 1):?>
<div>
<?php endif; ?>
<a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">
<?php
echo get_small_thumbnail_post('experienceIcon');
?>
</a>
<?php
/**
* close the div slide when reaching $nbPostPerSlide
*/
?>
<?php if($postIndex >= $nbPostPerSlide): $postIndex = 0; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php
/**
* close the div after the loop
*/
?>
<?php if($postIndex && $postIndex < $nbPostPerSlide): ?>
</div>
<?php endif; ?>
</div>
</div>
<nav>
<ul id="nav">
<?php foreach($carouselItems as $index => $item): ?>
<li><?php echo $index; ?></li>
<?php endforeach; ?>
</ul>
</nav>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
刷卡2
上
下一个
谢谢这太棒了,唯一的问题是每张幻灯片只打印一个帖子缩略图,我想打印6个。