Q&A
#解決したいこと
Railsでwebアプリケーションを作成しています。
トップページにslickを使ってカルーセルを実装していますが、
ブラウザバックした際にカルーセルが動作しません。
・初回ページ読み込み時/リロード時は問題なく動作します。
・ブラウザバック時、見た目はスライドショーの体裁を保っていますが、前後のボタンやautoplayが動作していません。
・同じアプリケーションの別ページにもslickを用いたカルーセルを入れていますがそちらはブラウザバック時も問題なく動作します。
#環境
ローカルにて開発中です
| バージョン | |
|---|---|
| Ruby | 3.0.0 |
| Rails | 6.1.3 |
| macOS | Big sur 11.3 |
| turbolink | 5 |
#該当ファイル
app/javascript/slick.js
js
1 2document.addEventListener("turbolinks:load" 3, function() { 4///問題のスライダー 5 $('.slider').not('.slick-initialized').slick({ 6 dots: true, 7 dotsClass: 'slide-dots', 8 infinite: true, 9 speed: 300, 10 slidesToShow: 1, 11 slidesToScroll: 1, 12 centerMode: true, 13 centerPadding: '60px', 14 variableWidth: true, 15 prevArrow: '<i class="fas fa-chevron-left"></i>', 16 nextArrow: '<i class="fas fa-chevron-right"></i>', 17 autoplay: true, 18 autoplaySpeed: 3000, 19 responsive: [ 20 { 21 breakpoint: 1024, 22 settings: { 23 slidesToShow: 3, 24 slidesToScroll: 3, 25 infinite: true, 26 dots: true, 27 centerMode: true, 28 } 29 }, 30 { 31 breakpoint: 600, 32 settings: { 33 slidesToShow: 1, 34 slidesToScroll: 1, 35 centerMode: true, 36 } 37 }, 38 { 39 breakpoint: 480, 40 settings: { 41 slidesToShow: 1, 42 slidesToScroll: 1, 43 centerMode: true, 44 } 45 } 46 ] 47 }); 48///別ページのスライダー こちらは動きます 49 $('.donnatoko_slider').slick({ 50 dots: true, 51 dotsClass: 'slide-dots', 52 speed: 300, 53 infinite: false, 54 slidesToShow: 1, 55 slidesToScroll: 1, 56 prevArrow: '<i class="fas fa-caret-square-left"></i>', 57 nextArrow: '<i class="fas fa-caret-square-right"></i>', 58 responsive: [ 59 { 60 breakpoint: 1024, 61 settings: { 62 slidesToShow: 1, 63 slidesToScroll: 1, 64 infinite: false, 65 dots: true 66 } 67 }, 68 { 69 breakpoint: 600, 70 settings: { 71 slidesToShow: 1, 72 slidesToScroll: 1, 73 infinite: false, 74 } 75 }, 76 { 77 breakpoint: 480, 78 settings: { 79 slidesToShow: 1, 80 slidesToScroll: 1, 81 infinite: false, 82 } 83 } 84 ] 85 }); 86 87}); 88
app/javascript/packs/application.js
js
1import Rails from "@rails/ujs" 2import Turbolinks from "turbolinks" 3import * as ActiveStorage from "@rails/activestorage" 4import "channels" 5 6require('jquery') 7import "bootstrap" 8 9Rails.start() 10Turbolinks.start() 11ActiveStorage.start() 12 13require("trix") 14require("@rails/actiontext") 15 16 17require('slick.js') 18require('slick.min.js') 19
【slick読み込み箇所（header)】
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= favicon_link_tag('favicon.ico') %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap" rel="stylesheet"> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script> <%= render 'layouts/shim' %> </head>
【ビューファイル】
app/views/recommends/index.html.erb
erb
1 <div class="slider top60"> 2 <%= render @locals %> 3 </div> 4<!--以下略-->
app/views/recommends/_recommend.html.erb
erb
1<div class="swiper-slide"> 2 <div class="card"> 3 <!-- 中略 --> 4 </div> 5</div>
#試したこと
####.not('.slick-initialized')を追記
ブラウザバックした際にコンソールを確認したところ、
Uncaught TypeError: Cannot read property 'add' of nullが出ており、
こちらを参考に
$('.slider').slick({を
$('.slider').not('.slick-initialized').slick({としました。
エラーは解消されましたが、ブラウザバックしてスライダーが動かなくなる事象は解消しませんでした。
###コンソール上のエラーを確認
Failed to load resource: the server responded with a status of 404 (Not Found)
がajax-loader.gifに対して出ています。
調べてみたところあまり関係なさそうな気もしましたが、
slickをダウンロードした際のajax-loader.gitをapp/assets/imagesに入れましたがエラーは解消されず。。
####turbolinkの記述を変更
js
1document.addEventListener("turbolinks:load" 2, function() {
turbolinks:loadでは初回ページ読み込み時にしかjsを読み込んでくれないそうなので、
turbolinks:renderにしてみましたが、ブラウザバック時の問題は解消したものの、初回読み込み時にjsを読み込んでくれなくなりました。
####turbolinkの記述を削除
js
1$(function() { 2 $('.slider').not('.slick-initialized').slick({
としてみましたが、状況は変わりませんでした。
以上のことから、turbolinkが原因では無さそうなのですが、
turbolink:loadとturbolink:renderを併記できたら解決しそうな気がしております。
こちらの記事の下記記述
$(document).on 'page:restore', -> location.reload();
で上手くいきそうだと思ったのですが、
JavaScriptの知識も乏しく、どこに追記すればいいのかがわからず、
これ以上どのように調べるべきか途方に暮れております。
アドバイスいただけますと幸いです。
##参考にした記事
・https://qiita.com/kohei_wd/items/ca757e21db2f3d6133f4
・https://qiita.com/morrr/items/54f4be21032a45fd4fe9
・https://teratail.com/questions/110428
・https://spirits.appirits.com/doruby/9882/
回答1件
0
ベストアンサー
うまく動かない原因はおそらく、turbolinksがページ移行時にdomをキャッシュし再利用するのですが、slickがスライド化のために様々な属性を加えた状態のdomをキャッシュしているため、キャッシュからページを生成した際、再度slickを実行するとdomの構造がおかしいので、スライド化できていないのだと思います。
jsに下記を加えると、キャッシュされる前にスライダーを元のDOMに戻すので、正しく動作するかもしれません。
js
1document.addEventListener("turbolinks:before-cache", function(){ 2 $('.slider.slick-initialized').slick('unslick'); 3}
本来、他のスライダーも移行前に同じ処理を行う必要があるはずなのですが、他のスライダーはなぜ動作しているのか不明です。
投稿2021/08/02 08:17
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/02 08:47