slickを用いた画像スライド

ECサイトなどにある、投稿した画像を表示しホバーしたらスライドする機能をRailsで実装しました！
見た目は下記の通りです！

まずはビューです！

slick.html.haml

.main-content.clearfix
  .main-content__photo
    .owl-carousel.owl-loaded.owl-drag
      .owl-stage-outer
        .owl-stage{ style: 'left:0px',width: '900px'}
          - @item.images.each do |i|
            - if i.image.present?
              .owl-item{ style: 'width:300px'}
                .owl-item__inner.is-higher-width
                  = image_tag i.image

      .owl-dots
        - if @item.images.present?
          - @item.images.each do |i|
            .owl-dot
              .owl-dot-inner
                = image_tag i.image

imageは別テーブルに保存してあるので、アソシエーションを忘れずに。

slick.scss

main-content {
  margin: 16px 0 0;
  @include clearfix;
  &__photo {
    float: left;
    min-width: 300px;
    max-width: 300px;
    min-height: 375px;
    position: relative;
    margin: 0 auto;
    background-color: #fafafa;
    .owl-carousel {
      position: relative;
      .owl-stage-outer {
        position: relative;
        overflow: hidden;
        .owl-stage {
          position: relative;
          .owl-item {
            min-height: 1px;
            float:left;
            &__inner {
              position: relative;
              width: 100%;
              height: 0;
              padding: 0 0 100%;
              .owl-lazy {
                transition: opacity 400ms;
              }
              img {
                position: absolute;
                top: 0;
                left:0;
                bottom: 0;
                right: 0;
                width: 100%;
                margin: auto;
                max-height: 300px;
              }
            }
          }
        }
      }
      .owl-dots {
        line-height: 0;
        font-size: 0;
        .owl-dot {
          position: relative;
          overflow: hidden;
          display: inline-block;
          width: 75px;
          height: 75px;
          opacity: 0.4;
          cursor: pointer;
          .owl-dot-inner {
            overflow: hidden;
            position: static;
            width: auto;
            height: 100%;
            padding: 0;
            pointer-events: none;
            img {
              height: 100%;
              width: 100%;
              vertical-align: bottom;
            }
          }
        }
      }
    }
  }
}

これで、写真通りのビューが出来ます！

次にslickを導入します！
slickサイトからCDNをコピー、そしてhead内に貼り付けるだけです！

layouts/application.html.haml

%link{rel: "stylesheet", type:"text/css", href: "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"}

%script{type: "text/javascript", src: "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"}

もし動かない場合は、下記がslick公式サイトなので参考にしてください！

最後にJSの記述です！
画像が５枚以上の場合、width,heightが変更され5列になります！

slick.js

$(document).on('turbolinks:load', function() {
  //始めにactionを追加
  $('.owl-dots .owl-dot:first-child').addClass('active');
  $('.owl-dots .owl-dot:first-child').css({'opacity':'1','pointer':'default'});
  //hover時に色変更&activeクラス追加
  $('.owl-dot').hover(function(){
    $('.active').css({'opacity':'','pointer':''})
    $('.active').removeClass('active');
    $(this).addClass('active');
    $(this).css({'opacity':'1','pointer':'default'});
  });
  //スライド
  $('.owl-stage').slick({
    autoplay: false,
    Speed: 3000,
    arrows: false,
    dots: false,
    dotsClass: 'owl-dots',
    pauseOnDotsHover: true,
    infinite: true,
  });

  $('.owl-dot').on('mouseover', function(e){
    var $currTarget = $(e.currentTarget);
    index = $('.owl-dot').index(this);
    slickObj = $('.owl-stage').slick('getSlick');
    slickObj.slickGoTo(index);    // アニメーション中でも切り替える
  });
  //画像が４枚よりも多い場合
  if($('.owl-dot').length > 4) {
    $('.owl-dot').css({'width':'60px','height':'60px'});
  }
});

これらの記述で、うまく動くはずです！

無駄な記述があるかもしれないので、アドバイス頂けたら嬉しいです！
また、どなたかの参考になれば幸いです！