イメージナビゲーションとスライダーの作成方法

今回はこんな感じのスライダーを作成します。
slickについては
【rails】slickを使ったスライダーの実装
こちらで説明しております！

slick以外の基礎知識はJqueryがあれば実装できます！

下のナビゲーション画像は、slick-dotsを使用しております。

この部分です！
なのでデフォルトでスライドナビゲーションがあるのでめっちゃ便利なので是非使ってみてください！

htmlとJqueryの記述だけさらっと

slider.html.haml

.slick-main
 = image_tag "img1.png"
 = image_tag "img2.png"
 = image_tag "img2.png"

slider.js

$(document).on('turbolinks:load', function(){
  $('.slick-main').slick({
    dots:true,
    customPaging: function(slick,index) {
      var targetImage = $(slick.$slides[index]).attr('src');
      return '<img src=" ' + targetImage + ' "/>';
    }
  });
  $( '.slick-main' ).on( 'mouseenter', '.slick-dots > li', function() {
    $( this ).click();
  });
  $( '.slick-main' ).on( 'mouseover', '.slick-dots > li', function() {
    $( this ).css({
      opacity: "1",
      cursor: "pointer"
    });
  });
  $( '.slick-main' ).on( 'mouseout', '.slick-dots > li', function() {
    $( this ).css({
      opacity: "",
      cursor: ""
    });
  });
});

何をしているかと言いますと・・・

slider.js

  $('.slick-main').slick({
    dots:true,
    customPaging: function(slick,index) {
      // スライダーのインデックス番号に対応した画像のsrcを取得
      var targetImage = $(slick.$slides[index]).attr('src');
      // slick-dots > li　の中に上記で取得した画像を設定
      return '<img src=" ' + targetImage + ' "/>';
    }
  });

上記部分はドットを作成して
customPagingでページングテンプレートをカスタマイズします。ドットリストの部分ですね！
(slick,index)にはご想像の通り、slickのオブジェクト（コード）と、index(数字)が渡されています。Jqueryでは$をオブジェクトの前に記述する事でそのHTML要素を取得する事ができます。
参考画像の様にslick.$slides[index]でドットのindexナンバーに当たるHTML要素が取得できた事になります。

その要素の中のsrc要素を取得する事でドットの対をなす画像が取得できそうですね！.attr('src')の.attr()はHTMLの要素を指定して取得できるメソッドです！

returnでslick-dits liにHTMLを差し込めば・・・
画像が表示されたでしょうか・？・？
もし表示されなかった場合は、

slider.js

 customPaging: function(slick,index) {
        // スライダーのインデックス番号に対応した画像のsrcを取得
        var targetImage = slick.$slides.eq(index).find('img').attr('src');
        // slick-dots > li　の中に上記で取得した画像を設定
        return '<img src=" ' + targetImage + ' "/>';
    }

としてみてください！

後は、

slider.js

//マウスポインターが要素に乗ったらクリックする動きでホバーの動きを作成
$( '.slick-main' ).on( 'mouseenter', '.slick-dots > li', function() {
    $( this ).click();
  });
//CSSの変化をつける。
  $( '.slick-main' ).on( 'mouseover', '.slick-dots > li', function() {
    $( this ).css({
      opacity: "1",
      cursor: "pointer"
    });
  });
  $( '.slick-main' ).on( 'mouseout', '.slick-dots > li', function() {
    $( this ).css({
      opacity: "",
      cursor: ""
    });
  });

以上となります！