railsにpagePiling.jsを導入したい

前提・実現したいこと

現在 ruby on rails を使用してwebサイトを作成しているのですが、jqueryのプラグインであるpagePiling.jsをうまく導入することができません。現状画面スクロールができない状態となっています。このプラグインを正常に動作させることが目標です。

今の状況

この二つのサイトを参考にし、Zipファイルを解凍して得たjquery.pagepiling.min.jsとjquery.pagepiling.cssは
app/javascripts/src/に配置してあります。
また、app/javascripts/src/packs/application.jsに
//= require ./src/jquery.pagepiling.minと、さらに
app/assets/stylesheets/application.scssに @import "../../javascripts/src/jquery.pagepiling";
という記述もしてあります。
そして、jqueryの記述

jquery
1$(function() {
2    $('#pagepiling').pagepiling({
3        menu: '#nav',
4        sectionSelector: '.section',
5        sectionsColor: ['#fff', '#eee', '#ddd', '#ccc'],
6        anchors: ['page1', 'page2', 'page3', 'page4'],
7        navigation: {
8            'textColor': '#000',
9            'bulletsColor': '#000',
10            'position': 'right',
11            'tooltips': ['page1', 'page2', 'page3', 'page4']
12        },
13    });
14});
15

はapp/javascripts/src/packs/application.jsに記述しました。
これはpagePiling.jsを導入したいトップページの一番下にも記述してみたのですがどちらもうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

バージョン:
Rails 6.0.3.4
jquery 1.12.4

よろしくお願いします。

gouf

2020/10/22 04:38

Web ブラウザの開発者コンソールにはなにかエラーメッセージの表示などは確認できますか?

行動規範の内容に同意します

回答1件

手作業でファイルをダウンロードするよりも、 Webpacker と連携させて、yarn からライブラリをダウンロードする方法を採ったほうがよいかもしれません

sh
1yarn add jquery pagepiling.js

javascript
1// app/javascript/packs/application.js
2
3// jQuery... $ を利用可能にする
4import $ from 'jquery'
5global.$ = $
6global.jQuery = $
7
8// PagePiling.js の読み込み (JS, CSS)
9require('pagepiling.js')
10require('pagepiling.js/dist/jquery.pagepiling.css')
11
12$(() => {
13  // PagePiling.js の初期化
14  $('#pagepiling').pagepiling();
15})