Question

以下是一行显示4个帖子的代码

<?php
        $new_loop = new WP_Query( array(
            'post_type' => 'article-form',
            'posts_per_page' => 4 // put number of posts that you'd like to display
        ) );
    <?php if ( $new_loop->have_posts() ) : ?>
            <?php while ( $new_loop->have_posts() ) : $new_loop- >the_post(); ?>
        <div class="col span_1_of_4  " id="recent">
                <a href="<?php the_permalink();?>"><?php if ( has_post_thumbnail()) {
                    the_post_thumbnail('small-image',array('class' => 'img-responsive')); }?>
            <span class="title-caption"><?php the_title(); ?></span></a>

        </div>

            <?php endwhile;?>
        <?php else: ?>
        <?php endif; ?>
        <?php wp_reset_query(); ?>

当屏幕为480px时，我想要一个图像滑块，并且可以在该滑块中显示这4个图像的帖子。

Answer 1

这是一个HTML / JS问题，而不是Wordpress问题。

尝试做这样的事情：

.slider { // Create wrapper for slider
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider-item img {
  // Styling for when viewport is smaller than 480px;
 }

@media(min-width: 480px) {
  .slider-item img {
   // Styling for when viewport is bigger than 480px;
   }
 }

<div class="slider">
  
  // Start loop
  
  <div class="slider-item">
    
    // Load induvidial image here
    
   </div>
  
</div>

你可以稍后添加一些JS来让它全部滚动和填充。

当浏览器最小化为480px时，如何将一行中显示的4个图像帖子更改为图像滑块？

1 个答案: