php - 从数组输出 (WordPress PHP) 在纯 css 中创建 slider 图像和文本

Question

WordPress PHP

我面临的问题是它破坏了图像而不是将它们放在一起。图像没有很好地对齐，因为它把它们放在彼此下面。我正在遍历数组以获取图像和文本。此外，我计划创建一个带虚线的分页以显示代表 slider 中的每个图像和文本

 <?php

 $args = array(
     'post_type' => 'home_page', // slug
     'posts_per_page' => 3, 

 );

 $my_query = new WP_Query( $args );

 if ( $my_query->have_posts() ) {

     while ( $my_query->have_posts() ) {

         $my_query->the_post();
        // echo get_the_ID(); using the get_the_id to have the sense if a post exists
      //  print_r(get_field('slider')) ;
      echo '<div id="captioned-gallery"><figure class="slider">';
          $slider_array = get_field('slider');
          foreach($slider_array as $sub_array) {
            // print_r($sub_array['slider_text']);
                    echo '<figure>';
                    echo '<img src="'.$sub_array['slider_image'].'" />';
                    echo '<figcaption>'.$sub_array['slider_text'].'</figcaption>';
                    echo '</figure>';
          }
          echo ' </figure></div>';
           echo '<div class="sidebar"><p>'. get_field('side_bar').'</p></div>';
     }

 }

 // Reset the `$post` data to the current post in main query.
 wp_reset_postdata();
 wp_reset_query(); 
 ?>

CSS 文件

@keyframes slide {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}

div#captioned-gallery { 
  width: 100%; overflow: hidden; 
}
figure.slider { 
  position: relative; width: 500%;
  font-size: 0; 
  animation: 30s slide infinite; 
}
figure.slider figure { 
  width: 100%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption { 
  position: absolute; bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}

Answer 1

问题是当你使用百分比单位时(比如你的代码:width: 500%)， child 的全宽(width: 100%)是与父宽度相同。所有的接缝都具有 width: 500%。

对于你在做什么，你可以使用 vw 而不是 %，我从你的代码中创建了一个片段并解决了你的问题。 注意:我认为它需要一些我在某些类中添加的max-height。

@keyframes slide {
0% { left: 0vw; }
20% { left: 0vw; }
25% { left: -100vw; }
45% { left: -100vw; }
50% { left: -200vw; }
70% { left: -200vw; }
75% { left: -300vw; }
95% { left: -300vw; }
100% { left: -400vw; }
}
* {
  box-sizing: border-box;
}

div#captioned-gallery { 
  width: 100vw;
  max-height: 100vh;
  overflow: hidden; 
}
figure{
  margin: 0px;
  padding: 0px;
}
figure.slider { 
  position: relative;
  width: 500vw;
  max-height: 100vh;
  font-size: 0; 
  animation: 30s slide infinite;
  white-space: nowrap;
}
figure.slider figure { 
  width: 100vw;
  height: auto;
  max-height: 100vh;
  display: inline-block;
  position: inherit; 
}
figure.slider img {
  width: 100%;
  height: auto;
  max-height: 100vh;
}
figure.slider figure figcaption { 
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem; 
}

<div id="captioned-gallery">
  <figure class="slider">
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/500px-Google_2015_logo.svg.png" />
      <figcaption>Google</figcaption>
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/160px-Apple_logo_black.svg.png" />
      <figcaption>Apple</figcaption>
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/440px-Microsoft_logo_%282012%29.svg.png" />
      <figcaption>Microsoft</figcaption>
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Facebook_Logo_%282015%29_light.svg/500px-Facebook_Logo_%282015%29_light.svg.png" />
      <figcaption>Facebook</figcaption>
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/400px-IBM_logo.svg.png" />
      <figcaption>IBM</figcaption>
    </figure>
  </figure>
</div>