83903


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

### ＊＊＊実現したいこと＊＊＊

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

### ＊＊＊試したこと＊＊＊

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

例）画像１画像２、画像３画像４、画像５画像６、画像７画像８、画像９画像１０、  
現在、画像１と画像２が表示されてるとして、スライドさせると一瞬だけ画像３画像４が表示されますが、すぐに画像７画像８に飛んだりと順番通りに表示されません。  
言葉での説明が難しいのですいません。

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

[code]

    /*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>
    
[/code]

プラグインのサイトは[こちら](https://kenwheeler.github.io/slick/)です。  
アドバイスやご指摘があればとても助かります。よろしくお願いいたします。

[teratail](https://teratail.com/questions/367642)でも同じ質問をしています。


CC BY-SA 4.0
2021-11-04T07:38:33.297
83425
2021-12-02T00:42:57.670
29392
question
javascript php jquery
slick sliderのslideToShowの値をスワイプする度にランダムに変更させたいです。

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2021-12-01T06:08:26.457
83903
2021-12-02T00:42:57.670
2021-12-02T00:42:57.670
3060
49302
83425
answer