0
Wordpressでスライダを作成しました。このスライダは、イメージが横長か縦長かに基づいて可変イメージカウントを返す必要があります。だから、私はWordpressに画像の寸法を取得させ、画像の向きに基づいて投稿にクラスを割り当てるようにしました。風景と肖像画を使用したSlick Slider
私はこのクラスを使って、ポートレートのすべてのdivを風景画像と同じ列名にペアリングしました。
私が今問題にしているのは、空のdivで残っているということです。私は他の人のjQueryコードを使用していましたが、滑らかなスライダのカウントと競合しているかどうか、スクリプトが画像を分割する前にスライドが作成されているかどうかはわかりません。とにかく、これについてのいくつかの洞察を本当に感謝します。私のコードは以下の通りです：
\t <div class="slider">
\t \t \t <span>
\t \t \t \t <span class="element half"><?php get_template_part('template-parts/content', 'single'); ?></span>
\t \t \t </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
\t $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');
\t \t \t $wi = $image_attributes[1];
\t \t \t $he = $image_attributes[2];
\t \t \t if ($wi > $he) \t \t : \t $orient = 'full';
\t \t \t elseif ($wi < $he) \t : \t $orient = 'half';
\t \t \t endif;?>
\t \t \t \t <span>
\t \t \t \t \t <span class="element <?php echo $orient; ?>"><?php echo wp_get_attachment_image( $attachment->ID, 'large'); ?></span> \t \t
\t \t \t \t </span>
<?php }
\t \t } ?>
\t </div>
<script>
jQuery(window).load(function() {
// Convert the NodeList to an Array
\t var pairs = [];
\t jQuery('span.half').each(function(i, div) {
\t var i_over_2 = Math.floor(i/2);
\t if (!pairs[i_over_2]) pairs[i_over_2] = jQuery();
\t pairs[i_over_2] = pairs[i_over_2].add(div);
\t });
\t jQuery.each(pairs, function(i, p) {
\t p.wrapAll("<span class='full'></span>");
\t });
\t \t
});
jQuery(document).ready(function(){
\t jQuery('.slider').slick({
\t arrows: true,
\t infinite: false,
\t speed: 500,
\t fade: true,
\t cssEase: 'linear'
\t });
});
</script>のdevのサイトはここで見ることができます：dev site
[OK]を、私のJavaScriptが二つのアイテムをラップするとき、それはラップの後に余分なdiv要素を出力し、スライダーを開始する前にされているようですので。何か案は？ –