スライダープラグイン「Flickity」がチュートリアル通りに実装してもうまく動作しない

概要

javascriptのスライダープラグイン「Flickity」の導入を試みているのですが、チュートリアルの通りにコピペしてもうまく動作しません。
よろしくお願いいたします。

公式ページ(チュートリアル)

https://flickity.metafizzy.co/

エラー内容

Bad element for Flickity: .main-carousel

コード

チュートリアルと同じですが以下の通りです。

html
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width,initial-scale=1">
4
5    <title>hogehoge</title>
6    <link rel="stylesheet" type="text/css" href="base.css?ver=1.0.1">
7
8    <!-- Flickityの読み込み -->
9    <!-- CSS -->
10    <link rel="stylesheet" href="flickity.css" media="screen">
11    <!-- JavaScript -->
12    <script src="flickity.pkgd.min.js"></script>
13
14    <script type="text/javascript" src="base.js"></script>
15</head>
16<body>
17    <div class="main-carousel">
18        <div class="carousel-cell">...</div>
19        <div class="carousel-cell">...</div>
20        <div class="carousel-cell">...</div>
21    </div>
22</body>

javascript
1var elem = document.querySelector('.main-carousel');
2var flkty = new Flickity( elem, {
3  // options
4  cellAlign: 'left',
5  contain: true
6});
7
8// element argument can be a selector string
9//   for an individual element
10var flkty = new Flickity( '.main-carousel', {
11  // options
12});
13

kei344

2019/10/21 07:59

script要素がありませんが、試されたコードもそのままの状況でしょうか。

sodneter

2019/10/21 08:01

大変失礼しました。<head></head>部分も記載いたしました。

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

回答1件

ベストアンサー

base.jsの内容が提示のJavaScriptなら、ロードを待つ処理が足りません。
</body>の直前にscript要素を移動するか、DOMContentLoadedを待ちましょう。

js
1document.addEventListener( 'DOMContentLoaded' , function( e ) {
2	// ここにコード
3}, false );

投稿2019/10/21 08:04

kei344

総合スコア69596

sodneter

2019/10/21 08:09

迅速な回答ありがとうございました。大変助かりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

スライダープラグイン「Flickity」がチュートリアル通りに実装してもうまく動作しない

概要

公式ページ(チュートリアル)

エラー内容

コード

関連した質問