複数の要素を横にスライドで表示する方法

###知りたいこと・実現したいこと
下記のサイトで、携帯サイズで表示した際に、Our Community枠では、複数の要素を横スライドすることにより、表示させていますが、この方法をどのようにするのか知りたいですが、調べてもなかなか出てきません。
https://aw-anotherworks.com/
どのようなワードで検索すればよろしいか知りたいです。
よろしくお願いします。
###追記
下記サイトを参考にslickを実装。
https://qiita.com/hitochan/items/e50733e5ab61a78a2edd

Chrome Developer Toolsで確認するとうまくできているにも関わらず、デプロイすると、全ページが表示されており、slickがうまくできていません。

slick.min.self-0c7178cc6ca34fb18e30f070a5e7a1c287b2d7ccfcba2cfdf06e0f46eda55740.js?body=1:1 Uncaught ReferenceError: jQuery is not defined
    at slick.min.self-0c7178cc6ca34fb18e30f070a5e7a1c287b2d7ccfcba2cfdf06e0f46eda55740.js?body=1:1
    at slick.min.self-0c7178cc6ca34fb18e30f070a5e7a1c287b2d7ccfcba2cfdf06e0f46eda55740.js?body=1:1

Rails 5.2.1
ruby 2.5.

js
1$function() {
2    $('.voice-mobile').slick({
3        dots: true,
4        autoplay: true,
5        autoplaySpeed: 7000,
6    });
7    $('.slick-dots li').on('mouseover', function() {
8    $('.voice-mobile').slick('goTo', $(this).index());
9  });
10});

application/html.erb

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

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

回答1件

ベストアンサー

簡単に導入したいのであればjQueryプラグインのslickをお勧めします。

https://webdesignday.jp/inspiration/technique/jquery-js/3847/

投稿2020/03/09 15:29

soliste16

総合スコア757

tomtom1

2020/03/10 07:10

ありがとうございます。とても簡単に実装できて便利ですね。お聞きしたいのですが、実装するとローカル環境にて、 Chrome Developer Toolsで確認すると、うまくできているのですが、デプロイしたらslickがうまく実装できておらず、全ページが表示されています。 slick.min.self-0c7178cc6ca34fb18e30f070a5e7a1c287b2d7ccfcba2cfdf06e0f46eda55740.js?body=1:1 Uncaught ReferenceError: jQuery is not defined at slick.min.self-0c7178cc6ca34fb18e30f070a5e7a1c287b2d7ccfcba2cfdf06e0f46eda55740.js?body=1:1 at slick.min.self-0c7178cc6ca34fb18e30f070a5e7a1c287b2d7ccfcba2cfdf06e0f46eda55740.js?body=1:1 というエラーが出てしまいましたが、解決方法は分かりますでしょうか？追記します。

soliste16

2020/03/10 07:18

jQueryをhead内で読み込んでいてもできない場合は、slick.min.jsもしくはslick.jsの読み込み（scriptタグ）を</body>の直前に置いてみてください。

tomtom1

2020/03/10 07:34

slick.min.jsを</body>の直前に置いてみましたが、反応は得られませんでした。また、//= require turbolinksも外して試しましたがうまくいきません。他のサイトでscssのインポートを貼る指示を発見しましたが、こちらは関係ないと思いやっていません。必要でしょうか？ @import "slick-theme"; @import "slick";

soliste16

2020/03/10 07:58 編集

直るかはわかりませんが、以下をapplication.jsに書いているのであれば消してみてください。 //= require jquery_ujs もしくは、application.html.erbで、application.jsより前にCDNからのjQuery読み込みコードを追加するという方法もあります。どちらにせよ原因はslickがjQueryを読み込めていないことだと思います。

tomtom1

2020/03/10 08:01

ごめんなさい！たった今全てのjQueryが効いていないことが判明しました。昨日の作業の中でこのようになってしまったと思います。本件が原因の可能性が高いですので、まずこちらの修正します。少々お待ちください。

tomtom1

2020/03/10 08:34

原因が判明しました。 http://kenwheeler.github.io/slick/にて、ダウンロードしたファイル3点下記のように配置し、デプロイしたことにより、全ての'turbolinks:load'記載のjQueryの反応がなくなってしまっておりました。 slick-theme.scssとslick.scss　→　assets/stylesheet slick.min.js　→　assets/javascript 正規のサイトからダウンロードしたファイルですが、これはなぜこのようなことが起こるのでしょう..。この症状から何かお分かりになることはありますか？

soliste16

2020/03/10 09:10 編集

それが理由とは思えません。載せてあるjavascriptのready関数に丸かっこが一つ足りないですがこれは関係ありませんか。 $(function() {

tomtom1

2020/03/10 09:40

application.jsにて、以下2点を一番下にしたら解決しました！ありがとうございます //= require turbolinks //= require_tree .