#実現したいこと
・railsの個人アプリにswiper.jsを導入したいです。
現時点では、デザイン等は気にせず、swiperが自身のアプリ内で正常に動くことを確認したいと考えております。
故に、swiperの公式サイトからコピーしてきたデフォルトの記述をそのまま流用しております。
開発環境
ruby 2.6.5
rails 6.0.3.5
#エラーメッセージ
Indiccate whether to send a cookie in a cross-site request by specifying its SameSite attribute
#該当のコード
ruby:apllication.html.erb
1~application.html.erb~ 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <title>CS</title> 7 <%= csrf_meta_tags %> 8 <%= csp_meta_tag %> 9 10 <%# 以下2文swiper導入のための記述 %> 11 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 12 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 13 <%# 以上2文swiper導入のための記述 %> 14 15 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 16 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 17 18 19 20 </head> 21 22 <body> 23 <%= yield %> 24 25 </body> 26</html> 27
ruby:business/index.html.erb
1~business/index.html.erb~ 2 3<%= render "shared/header" %> 4 5 6 <h1 class="subject"> 7 新着業務一覧 8 </h1> 9 10<!-- Slider main container --> 11<div class="swiper-container"> 12 <!-- Additional required wrapper --> 13 <div class="swiper-wrapper"> 14 <!-- Slides --> 15 <div class="swiper-slide">Slide 1</div> 16 <div class="swiper-slide">Slide 2</div> 17 <div class="swiper-slide">Slide 3</div> 18 ... 19 </div> 20 <!-- If we need pagination --> 21 <div class="swiper-pagination"></div> 22 23 <!-- If we need navigation buttons --> 24 <div class="swiper-button-prev"></div> 25 <div class="swiper-button-next"></div> 26 27 <!-- If we need scrollbar --> 28 <div class="swiper-scrollbar"></div> 29</div> 30
ruby:swiper.js
1~swiper.js~ 2 3var mySwiper = new Swiper('.swiper-container', { 4 // Optional parameters 5 direction: 'vertical', 6 loop: true, 7 8 // If we need pagination 9 pagination: { 10 el: '.swiper-pagination', 11 }, 12 13 // Navigation arrows 14 navigation: { 15 nextEl: '.swiper-button-next', 16 prevEl: '.swiper-button-prev', 17 }, 18 19 // And if we need scrollbar 20 scrollbar: { 21 el: '.swiper-scrollbar', 22 }, 23})
#試したこと
公式サイト、以下サイトを確認し、各作業を行った。
トップページにswiperのSlide1の記述は見受けられ流のだが、スライドさせることができないため、JavaScriptの記述もしくは読み込みに問題があると考えた(特に後者。∵前者に関しては公式ページの記述をコピーしていることからも可能性が低いのではないかと考えております。)。
そこで、application.html.erb
におけるCDNの記述とScriptの記述自体の確認とバージョン、各順番に関して試したが解決には至らなかった。
https://qiita.com/miketa_webprgr/items/0a3845aeb5da2ed75f82
#最後に
是非とも皆様のお力をお借りできたらと考えております。
忙しいところ大変恐縮ですが、ご回答いただけますと幸いです。
何卒、よろしくお願い申し上げます。
あなたの回答
tips
プレビュー