１つのページの中で、複数回画像のスライドショーを使用したいです。「owl carousel」

いつも、お世話になっております。
今、画像のスライドショーのプラグインで「owl carousel」を使用しているのですが同じページの中に複数回使用したいです。
owl carousel

ただ、複数回使用している箇所の一番目の箇所しかスライドが反映されなくて困っております。

少し調べた結果、以下のページが見つかったのですがjquery,cssあたりの知識が乏しいため意味がよくわからず解決方法がわかりません。
参考ページ

具体的にどのように対応したらよろしいのでしょうか？
よろしくお願いいたします。

owl-carouselの設定内容

lang
1$(document).ready(function() {
2
3  $("#owl-demo").owlCarousel({
4
5      navigation : false, // Show next and prev buttons
6      slideSpeed : 300,
7      paginationSpeed : 400,
8      singleItem : true,
9      autoheightt: true
10  });
11
12});

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

回答1件

ベストアンサー

lang
1<div id="owl-example" class="owl-carousel">

HTMLで、idとはid="owl-example"の部分を言います。これはHTMLの要素を一意に識別できるものであり、重複するものは存在してはいけません。
対して、クラスとはclass="owl-carousel"の部分を言います。idが重複するものは許されないのに対して、クラスは複数のものに同じクラスを設定できます。

jQueryでidがowl-exampleのものを取得するには、

lang
1$("#owl-example")

とします。
対して、クラスがowl-carouselのものを取得するには

lang
1$(".owl-carousel")

とします。
従って、複数個所の画像のスライドショーを行うには

lang
1$(document).ready(function() {
2
3  $(".owl-demo").owlCarousel({
4
5      navigation : false, // Show next and prev buttons
6      slideSpeed : 300,
7      paginationSpeed : 400,
8      singleItem : true,
9      autoheightt: true
10  });
11
12});