【Rails】slick을 사용하여 슬라이드 형식으로 이미지를 표시합시다!

15496 단어 RailsRails6slickActiveStorage초보자
슬릭을 사용하여 여러 이미지를 슬라이드 형식으로 표시할 수 있는 기능을 구현합니다.
이번에도 레시피 앱을 예로 작성하겠습니다.

완성 이미지



※이번은 화상 투고 기능이 실장되고 있는 전제로 이야기를 진행해 갑니다.
화상 투고 기능에 대해서는 전회 기사로 하고 있으므로 그쪽을 참조해 주세요.



slick이란?



slick은 jQuery 기반의 슬라이더를 만드는 플러그인입니다.

슬릭 소개



먼저 slick의 공식 사이트으로 이동하여 get it now를 선택합니다.


그러면 페이지 하단으로 전환하므로 거기에 나열된 CDN 코드를 복사합니다.


복사한 코드를 application.html.erb에 붙여넣습니다.

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Recipe</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>  #追加

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>  #追加
  </head>
#以下略

jQuery 도입



Bootstrap을 도입하고 있다면 이미 jQuery가 도입되었으므로 날려주세요.
Bootstrap 도입에 대해서는 이쪽

그럼 jQuery를 도입하겠습니다.

터미널
yarn add jquery

webpack을 설정합니다.

config/webpack/environment.js
const { environment } = require('@rails/webpacker')

//ここから
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
//ここまでを追加

module.exports = environment

jQuery를로드합니다.

app/javascript/packs/application.js
//中略

require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./preview")
require('jquery')  //追記

//以下略

이상으로 slick, jQuery의 도입 완료입니다.

슬라이드 구현



뷰 파일 편집



우선, 표시하고 싶은 화상을 뷰에 표시시킵니다.

app/views/recipes/show.html.erb

<div class="text-center">
  <div class="card recipe-card ">

　　#画像の表示
    <% @recipe.images.each do |image| %>
       <%= image_tag image, class: "card-img-top show-img" %>
    <% end %>

    <div class="card-body">
      <div class="recipe-name">
        <%= @recipe.title %>
      </div>
      <div class="recipe-content">
        カテゴリー: <span class="recipe-category"><%= @recipe.category.name %></span>
        所要時間: <span class="recipe-time"><%= @recipe.time_required.name %></span>
      </div>
      <hr>
      <p class="card-text">
        <div class="recipe-title">作り方</div>
        <div class="recipe-text d-flex justify-content-start">
          <%= safe_join(@recipe.text.split("\n"),tag(:br)) %>
        </div>
      </p>
    </div>
  </div>
</div>

이대로 하면 아래와 같이 이미지를 3장 세로로 늘어놓은 것뿐입니다.


slick.js 만들기



slick을 사용하기위한 JS 파일을 만듭니다.
touch app/javascript/packs/slick.js

작성한 slick.js에 다음 코드를 붙여 넣습니다.

app/javascript/packs/slick.js
$(function() {
  $('.slider').slick();
});

slick.js를 로드합니다.

app/javascript/packs/application.js
//中略

require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./preview")
require('jquery')  
require("./slick") //追記

//以下略

그런 다음 뷰 파일을 다음과 같이 슬라이더의 div 요소로 image_tag를 둘러싸도록 다시 편집합니다.

app/views/recipes/show.html.erb
<div class="text-center">
  <div class="card recipe-card ">

    #sliderで囲う
    <div class="slider">
        <% @recipe.images.each do |image| %>
          <%= image_tag image, class: "card-img-top show-img" %>
        <% end %>
    </div>

    <div class="card-body">
      <div class="recipe-name">
        <%= @recipe.title %>
      </div>

#以下略

그러면 다음과 같이 슬라이드를 구현할 수 있습니다.


slick.js 편집



이 상태에서는 위쪽과 아래쪽 버튼이 잘못되어 표시되지 않도록 slick.js를 편집합니다.
버튼 대신 자동으로 슬라이드를 재생시키는 설명을 합니다.

app/javascript/packs/slick.js
$(function() {
  $('.slider').slick({
      arrows: false,  //ボタン非表示
      autoplay: true, //自動再生
      autoplaySpeed: 4000, //再生スピード
  });
});

이상으로 완성입니다.
[Rails6]ActiveRecord::NoDatabaseError 솔루션
Ruby on Rails6에서 새로운 애플리케이션 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage