0

こんにちは。wordpressでサイト制作をしていて、スライダーにはプラグインの"slick slider"を使用しています。

***実現したいこと***

スワイプ、またはスライドが切り替わるたびに表示させる画像の数を変更したいです。
表示させたい枚数の範囲は、1−2枚です。
例)スライド => 画像2枚表示,
2回目スライド => 画像1枚表示、
3回目スライド => 画像1枚表示、
4回目スライド => 画像2枚表示,,,, etc

***試したこと***

スワイプ(画像が切り替わる)するたびにランダムに整数を生成して、その整数をslideToShowの値に代入しましたが、変な挙動をします。。

例)画像1画像2、画像3画像4、画像5画像6、画像7画像8、画像9画像10、
現在、画像1と画像2が表示されてるとして、スライドさせると一瞬だけ画像3画像4が表示されますが、すぐに画像7画像8に飛んだりと順番通りに表示されません。
言葉での説明が難しいのですいません。

beforeChangeの箇所をafterChangeなどに変更して挙動を確認しましたが変わらず。。

/*main.js*/
$('#slick').on('swipe', function () {
const randomNum = 1 + Math.floor(Math.random() * 2);
$(this).on('beforeChange', function () {
  $(this).slick('slickSetOption', {
    slidesToShow: randomNum,
  }, true);
})
console.log(randomNum)
});

$('#slick').slick({
  // slidesToShow: randomNum,
  slidesToScroll: 1,
  arrows: false,
  adaptiveHeight: true,
});


<!-- single-post.php -->
<div id="slick">
 <?php if ($portfolioGallery) : ?>
  <?php foreach ($portfolioGallery as $image) : ?>
   <div class="photo side-scroll-item">
     <?php $size = ($image['width'] / $image['height'] > 1) ? 'landscape' : 'portrait';
     echo wp_get_attachment_image($image['ID'], $size, false, ['class' => 'gallery__image--' . ($index % 10) . ' ' . $size]);
     ?>
   </div>
  <?php endforeach; ?>
 <?php endif; ?>
</div>

プラグインのサイトはこちらです。
アドバイスやご指摘があればとても助かります。よろしくお願いいたします。

teratailでも同じ質問をしています。

1 件の回答 1

1
<ul class="slider">
  <?php $args = array(
    'posts_per_page' => 3, //表示する記事の数
    );
    $customPosts = get_posts($args);
    if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );
  ?>
  <li>
    <a href="<?php the_permalink(); ?>">
      <?php the_title(); ?> <!--記事タイトルを表示-->
    </a>
  </li>
  <?php endforeach; ?>
  <?php else : //記事が無い場合 ?>
  <p>このカテゴリーにはまだ記事がありません</p>
  <?php endif; wp_reset_postdata(); //クエリのリセット ?>
</ul>

<script>
$(function () {
  $(".slider").slick({
    autoplay: true,
    vertical: true,
    verticalSwiping: true,
  });
});
</script>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。