光滑滑块使用景观和肖像

Question

我创建了一个带有Wordpress的滑块，需要根据图像是横向还是纵向返回可变图像数。所以我做的是让Wordpress检索图像尺寸，然后根据图像方向为帖子分配一个类。

然后我使用该类将所有纵向的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中取出并放在另一个div中 - 所以不是直接添加div Slick Slider需要它现在通过HTML生成。对于只有风景图像的页面也存在问题。因此，对于想要添加滑块的人来说，这是第一项是内容，第二项是背景图像，其余是横向或纵向的解决方案。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;