Owl Carousel2が動かない場合の対処法!

Owl Carousel2は導入するだけで簡単にカルーセルを実装することができるjQueryプラグインです。しかし、導入の仕方を間違えてしまうとカルーセルが上手く動きません。この記事ではOwl Carousel2が動かない場合の原因と対処法を紹介しています。

コンテンツ [表示]

  1. 1Owl Carousel2が動かない
  2. 2Owl Carousel2が動かない場合の対処法
  3. 2.1Owl Carousel2を読み込めていない
  4. 2.2jQueryを読み込めていない
  5. 2.3クラス名owl-carouselを間違えている
  6. 3まとめ

Owl Carousel2が動かない

Owl Carousel2は導入することで簡単にカルーセルを実装することができるjQueryのプラグインです。

Owl Carousel2の導入方法や使い方、オプションなどについては下記の記事で紹介しているので、ぜひ参考にしてみてください。

あわせて読みたい
Owl Carousel2の導入方法と使い方をサンプルコード付き解説!のイメージ
Owl Carousel2の導入方法と使い方をサンプルコード付き解説!
導入するだけで簡単にカルーセルを実装することが出来るようになるjQueryプラグインのOwl Carousel2があります。簡単に実装できるだけでなく、Owl Carousel2では様々なオプションが用意されておりカスタマイズも簡単にできます。
あわせて読みたい
Owl Carousel2のオプション一覧と使い方を紹介!のイメージ
Owl Carousel2のオプション一覧と使い方を紹介!
Owl Carousel2というプラグインを導入することで簡単にカルーセルを実装することが出来ます。Owl Carousel2ではオプションが多く用意されています。この記事ではOwl Carousel2のオプションの使い方をサンプルコード付きで解説しています。

カルーセルを簡単に実装できるOwl Carousel2ですが、使い方を間違えてしまうとカルーセルが上手く動きません。

今回はOwl Carousel2が動かない場合の原因とその対処法を紹介していきます。

Owl Carousel2が動かない場合の対処法

Owl Carousel2を読み込めていない

一番多いのがこのパターンが原因の時かと思います。

カルーセルを動かすためにはowl.carousel.cssのcssファイルとowl.carousel.jsのjsファイルの最低限この2つのファイルは読み込む必要があります。

読み込む際にファイル名やパスなどが間違っていて読み込めていない事態が発生していないかどうかChromeのデベロッパーツールなどでしっかり確認しながら、進めてみてください。

あわせて読みたい
Chromeでデベロッパーツールをショートカットで開く方法!のイメージ
Chromeでデベロッパーツールをショートカットで開く方法!
Chromeでデベロッパーツールをショートカットキーで開く方法を紹介します。先にショートカットのやり方の結論を伝え、また検証から開く方法やメニューから開く方法もあわせて解説します。

jQueryを読み込めていない

Owl Carousel2はjQueryを使っていることを前提に記述されています。そのため、Owl Carousel2のjsファイルを読み込む前にjQueryを読み込む必要があります。

しっかりjQueryが読み込めているかどうかやjQueryとOwl Carousel2のjsファイルを読み込む順番を確認してみましょう。

クラス名owl-carouselを間違えている

index.html

<div class="owl-carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div><!-- .owl-carousel -->

index.js

$('.owl-carousel').owlCarousel();

カルーセルで表示させる要素をまとめる親要素のタグにはclass="owl-carousel"を付ける必要があります。

また、スクリプト側でも同じように併せて.owl-carouselセレクタに対してowlCarouselメソッドを使用する必要があります。

別のクラス名を付けようとすると上手く動かないので、しっかりowl-carouselが指定できているかどうかを確認してみてください。

まとめ

Owl Carousel2が動かない原因とその対象法を紹介してきました。どれもよく注意してみれば気づくことが出来る簡単な原因が多いです。デベロッパーツールをしっかり確認して、落ち着いて対処していきましょう。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事