slick 이미지 슬라이드 사용하기

전자상거래 사이트 등에서 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

이미지는 다른 테이블에 저장되어 있기 때문에 관련성을 잊지 마세요.
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 사이트에서 CDN을 복사해서 헤드에 붙여넣으면 됩니다!
layouts/application.html.haml

%link{rel: "stylesheet", type:"text/css", href: "//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"}

%script{type: "text/javascript", src: "//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"}

만약 움직이지 않는다면 다음은 slick 공식 사이트입니다. 참고하세요!
마지막으로 JS의 기술!
초상화 5장 이상의 경우,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'});
  }
});

이런 식으로 기술하면 잘 움직일 거야!
쓸데없는 설명이 있을지도 몰라요. 조언해 주시면 기쁠 거예요!
그리고 누구의 참고가 될 수 있다면 다행이다!