先月まで制作していたサイトにて、100件の記事をトップページでスライドさせる、という要件があり、性能的な試行錯誤があったので備忘録的に残そうと思います。

今回はjQuery UI Sliderとカルーセルスライダーを相互にAPI接続する必要があったので、現在位置の取得、GOTOで任意の位置へ移動、UI側の現在の位置の取得、UI側を任意の位置へ移動、が カルーセルスライダー の必須条件でした。

加えて、レスポンシブ対応ももちろん必須です。

【プロトタイプ版】
HTMLベースにて、slickで実装。途中から、jQuery UI Sliderにて、バーを移動させると簡単に任意の記事へ移動できるようにしたいという要望も実装。

【本番公開・初期実装版】
WordPressベースにて、slick＋jQuery UI Sliderで実装。
HTML版との読み込み差異は、約0.5秒。
Chromeでの読み込みは早いが、致命的なのはiOS版Safariでの読み込みが劇的に遅いこと。スマホユーザーがターゲットだったことから、別の手段を模索することに。

【本番公開・改善版】
WordPressベースにて、Siema＋jQuery UI Sliderで実装。
劇的に速度が改善。指での反応も格段にスムーズになった。
追加要件では、文芸本をめくるようにページの逆送り（RTL）も要望に上がったので、jQuery UI SliderのRTLプラグインRight-to-left jQuery UI Slidersを導入で解決。

一応、参考にSiemaの実装ソース例も貼っておきます。
【Javascript】

//Siemaのスライダー位置が移動したら、UIも連動。
$('.slider-container').on('afterChange', function (slick, currentSlide) {
  var current_slide = this.currentSlide;
  $("#slider-ui").slider("value", current_slide);
});

//スライダーのカードの数
var num = $('.slider-container article').length;

//UIの動作設定
$("#slider-ui").slider({
  animate: false,
  range: "max",
  min: 1,
  max: num,
  value: 1,
  isRTL: true,
  slide: function (event, ui) {
    $("#amount").text(ui.value + "話");
  },
  change: function (event, ui) {
    $("#amount").text(ui.value + "話");
  },
  stop: function (event, ui) {
    var gotoNum = ui.value - 1;
    mySiema.goTo(gotoNum);
  }
});
$("#amount").text($("#slider-ui").slider("value") + "話");

//Siemaの動作設定
const mySiema = new Siema({
  selector: '.slider-container',
  duration: 200,
  easing: 'ease-out',
  center: true,
  perPage: 1,
  draggable: true,
  multipleDrag: true,
  threshold: 20,
  loop: true,
  rtl: true,
  onInit: () => {
    loader.fadeOut();
  },
  onChange: () => {
    var current_slide = mySiema.currentSlide + 1;
    $("#slider-ui").slider("value", current_slide);
  },
});

【WordPressソース】

    <div class="slider-container">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <article class="post-<?php echo $post->ID; ?>">
        <h2><?php the_title(); ?></h2>
        <div class="text">
          <?php the_content(); ?>
        </div>
      </article>
      <?php endwhile; endif; ?>
    </div>
    <div class="slider-ui-wrap">
      <div id="amount"></div>
      <div id="slider-ui"></div>
    </div>