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

标签 php html css wordpress

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; 
}

最佳答案

问题是当你使用百分比单位时(比如你的代码: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>

关于php - 从数组输出 (WordPress PHP) 在纯 css 中创建 slider 图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57712880/

相关文章:

html - 悬停时如何使 div 框改变颜色?

php - 如何将 PHP 添加到 Linux Mint 20(已安装 Apache2 和 MySQL)

php - 服务器从 example.html 重定向到 script.php?url=example

php - 将地址转换/地理编码为经纬度坐标 - Spiderfier for google map

jquery - 仅为选定元素更改验证错误类(Jquery 验证)

android - 调整浏览器屏幕大小后,CSS 水平滚动条出现在 chrome 中

php - Sql 不会在 WHERE 中获取值

html - CSS3 多个背景,一个在 ul 中重复

javascript - 将 SVG 从 DOM 导出到文件

css - 获取渐变以使用背景颜色