목표

개발 환경

루비 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

전제

※◯◯◯를 선택하면 설명 등이 나오므로,
잘 모르는 경우의 참고로 해 주시면 좋겠습니다.

devise로 로그인 환경 구축

로그인 사용자만 사용할 수 있는 게시 기능

게시물 편집 기능(업데이트, 삭제)
보충
rails g devise:install은 devise를 초기화합니다.

흐름

1　gem 도입
2 Skippr 사이트에서 파일 다운로드
3 실제 코드

gem 도입

Rails에서 jquery를 사용할 수 있습니다.

Gemfile

gem 'jquery-rails'

터미널

$ bundle insatll

app/assets/javascripts/application.js

//= require jquery　←追加
//= require jquery_ujs　←追加
//= require activestorage
//= require turbolinks
//= require_tree .

Skippr 사이트에서 파일 다운로드

공식 사이트
htp //// s s 텐파얀. 기주 b. 이오/s키트pr/

여기 Github를 클릭하고 ZIP 파일을 다운로드하십시오.



해동 후 아래와 같이 보관하십시오.

skippr.min.js 파일은 app/assets/javascripts 폴더에

skippr.css 파일은 app/assets/stylesheets 폴더에

실제 코드

app/assets/images에 image1.jpg ~ image4.jpg를 저장하십시오.

app/views/application.html.erb

<div id="box">
  <div id="images">
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
    <div class="image4"></div>
  </div>
</div>

app/assets/stylesheets/application.css

/* 高さを指定することにより画像が表示される */
#box{
  height: 600px;
}
.image1 {
  background-image: url(image1.jpg);
}
.image2 {
  background-image: url(image2.jpg);
}
.image3 {
  background-image: url(image3.jpg);
}
.image4 {
  background-image: url(image4.jpg);
}

app/assets/javascripts/application.js

$(document).ready(function () {
  $("#images").skippr({
    // スライドショーの変化 ("fade" or "slide")
    transition : 'slide',
    // 変化に係る時間(ミリ秒)
    speed : 1000,
    // easingの種類
    easing : 'easeOutQuart',
    // ナビゲーションの形("block" or "bubble")
    navType : 'block',
    // 子要素の種類("div" or "img")
    childrenElementType : 'div',
    // ナビゲーション矢印の表示(trueで表示)
    arrows : true,
    // スライドショーの自動再生(falseで自動再生なし)
    autoPlay : true,
    // 自動再生時のスライド切替間隔(ミリ秒)
    autoPlayDuration : 3000,
    // キーボードの矢印キーによるスライド送りの設定(trueで有効)
    keyboardOnAlways : true,
    // 一枚目のスライド表示時に戻る矢印を表示するかどうか(falseで非表示)
    hidePrevious : false
  });
});

요약

비교적 쉽게 도입 할 수 있지만,
bootstrap과 결합하면 작동하지 않을 수도 있으므로,
이 경우 여기를 참고하십시오.
【Ruby on Rails】bootstrap4의 carousel을 each 메소드를 사용하여 슬라이드쇼를 구현

또 twitter에서는 Qiita에는 업하고 있지 않은 기술이나 생각도 업하고 있으므로,
좋으면 팔로우 해 주시면 기쁩니다.
자세한 내용은 여기 htps : // 라고 해서 r. 이 m / 그럼 p를 rk