WHY

올리프로 복수의 화상을 슬라이드 표시시키는 기능을 실장했으므로 출력해 갑니다.

이번에는 rails에서 jquery의 slick이라는 플러그인을 사용하여 이미지를 슬라이드 표시합니다.

준비

이미지를 붙여넣어 뷰를 정돈해 갑니다.

뷰 파일

<div class="background">
  <div class="images">
    <%= image_tag "sample1.jpg" %>
    <%= image_tag "sample2.jpg" %>
    <%= image_tag "sample3.jpg" %>
    <%= image_tag "sample4.jpg" %>
  </div>
</div>

----CSS----
.images{
  width: 50vw;
  height: auto;
}

이렇게 되어 있습니다.


그러면 이 줄지어 있는 이미지를 슬라이드로 표시해 갈 수 있도록 해 가고 싶다고 생각합니다.

우선 Jquery를 소개합니다. views/shared/application.html.erb에 다음과 같이 설명합니다.

↓を記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
↓もともとある
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

그런 다음 아래에 세 줄을 추가합니다.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

마지막으로 javascript/packs/application.js의 마지막에 이하의 기술을 합니다.

$(function() {
  $('.images').slick({
      dots: true,
  });
});

확인

브라우저를 확인해 봅시다.


이미지가 한 장이 되어, 보기 힘들지만 점이 4개 붙었습니다. 보기를 조금 더 쉽게 볼 수 있습니다.

.background{
  background-color: gray;
  width: 40vw;
  height: auto;
  margin: auto;
}
.images{
  width: 30vw;
  height: auto;
  padding: 30px;
  margin: auto;
  background-color: lightblue;
}
.images img{
  width: 50%;
  height: auto;
}

그러면 이렇게 화살표가 보이고 이미지를 슬라이드시키는 데 성공했습니다.



slick에서는 다수의 옵션과 이벤트가 준비되어 있어, 화살표를 변경시키거나, 자동 재생을 할지 어떨지를 설정할 수 있고와 자신 취향에 커스터마이즈 할 수 있습니다!
자세한 것은 이쪽의 기사를 알기 쉬웠습니다.
htps : //우ぇb로 했던 y. jp / in s pyrachion / ch chuke / j kue ry-js / 3847 /

이번에는 아마도 첫 라이브러리를 도입했지만 매우 편리함에 놀랐습니다! 앞으로도 점점 조사해 가고 싶습니다!