使用横向和纵向的 Slick Slider

Question

我用 Wordpress 创建了一个滑块，它需要 return 根据图像是横向还是纵向来改变图像计数。所以我所做的是让 Wordpress 检索图像尺寸，然后根据图像方向将 class 分配给 post。

然后我使用 class 将所有纵向 div 与横向图像具有的相同列名称配对。

我现在遇到的问题是我只剩下空的 div。我一直在使用其他人的 jQuery 代码，但我不确定这是否与光滑滑块的计数冲突，或者幻灯片是否可能是在分割图像的脚本运行之前创建的。无论如何，真的很感激对此有所了解。我的代码如下：

 <div class="slider">
   <span>
    <span class="element half"><?php get_template_part( 'template-parts/content', 'single' ); ?></span>
   </span>
<?php /*
  * This is just a simple loop to display 7 attachments attached to a post or page in WordPress
  * You can change 'medium' and 'thumbnail' to add sizes you have definied in your theme by the add_image_size function
  * in WordPress
  */
?>
    <?php
 $thumb_ID = get_post_thumbnail_id( $post->ID );
    $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $thumb_ID );
    $attachments = get_posts( $args );
    if ( $attachments ) {
        foreach ( $attachments as $attachment ) {
            $image_attributes = wp_get_attachment_image_src( $attachment->ID, 'medium' );
   $wi = $image_attributes[1];
   $he = $image_attributes[2];
   if ($wi > $he)   : $orient = 'full';
   elseif ($wi < $he)  : $orient = 'half';
   endif;?>
    <span>
     <span class="element <?php echo $orient; ?>"><?php echo wp_get_attachment_image(  $attachment->ID, 'large' ); ?></span>  
    </span>
        <?php } 
  } ?>
 </div>
<script>
  jQuery( window ).load(function() {
// Convert the NodeList to an Array
 var pairs = [];
 jQuery('span.half').each(function(i, div) {
   var i_over_2 = Math.floor(i / 2);
   if (!pairs[i_over_2]) pairs[i_over_2] = jQuery();
   pairs[i_over_2] = pairs[i_over_2].add(div);
 });
 jQuery.each(pairs, function(i, p) {
   p.wrapAll("<span class='full'></span>");
 });

  
});
jQuery(document).ready(function(){
 jQuery('.slider').slick({
   arrows: true,
   infinite: false,
   speed: 500,
   fade: true,
   cssEase: 'linear'
 });
});
  </script>

可以在这里查看开发站点：dev site

Answer 1

好的，所以我想通了，当阵列在它周围移动图像时，将它从一个 div 中取出并放置在另一个中 - 所以不是添加 divs Slick Slider直接需要它，现在通过HTML生成。仅包含横向图像的页面也存在问题。因此，对于任何想要添加滑块的人来说，这里的解决方案是第一项是内容，第二项是背景图像，其余是横向或纵向。

<div class="slider">
   <div> 
    <div class="full">
     <div class="element half"><?php get_template_part( 'template-parts/content', 'single' ); ?></div>
     <div class="element half" style="background:url('<?php the_post_thumbnail_url();?>') no-repeat center center;background-size:cover;position:absolute;top:0;right:0;bottom:0;"></div>
    </div>
   </div>
<?php /*
  * This is just a simple loop to display 7 attachments attached to a post or page in WordPress
  * You can change 'medium' and 'thumbnail' to add sizes you have definied in your theme by the add_image_size function
  * in WordPress
  */
?>
    <?php
 $thumb_ID = get_post_thumbnail_id( $post->ID );
    $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $thumb_ID );
    $attachments = get_posts( $args );
    if ( $attachments ) {
        foreach ( $attachments as $attachment ) {
            $image_attributes = wp_get_attachment_image_src( $attachment->ID, 'medium' );
   $wi = $image_attributes[1];
   $he = $image_attributes[2];
   if ($wi > $he)   : $orient = 'landscape';
   elseif ($wi < $he)  : $orient = 'portrait';
   endif;?>
     <img src="<?php echo wp_get_attachment_image_url( $attachment->ID, 'large' ); ?>" class="element <?php echo $orient; ?>"/>  
        <?php } 
  } ?>
 </div>

<script>
  jQuery(document).ready(function() {
// Convert the NodeList to an Array
 var pairs = [];
 jQuery('.portrait').each(function(i, div) {
   var i_over_2 = Math.floor(i / 2);
   if (!pairs[i_over_2]) pairs[i_over_2] = jQuery();
   pairs[i_over_2] = pairs[i_over_2].add(div);
  
 });
 jQuery.each(pairs, function(i, p) {
   p.wrapAll("<div><div class='full'></div></div>");
   
 });
 jQuery('.landscape').wrap("<div><div class='full'></div></div>");
});

 jQuery(document).ready(function(){
 jQuery('.slider').slick({
   arrows: true,
   infinite: false,
   speed: 500,
   fade: true,
   cssEase: 'linear'
 });
});
  
  </script>

使用横向和纵向的 Slick Slider

Slick Slider using landscape and portrait

wordpress

jquery

slick.js